Which CSS properties are supported?

The converter supports common properties including display, position, flexbox, grid, spacing (margin/padding), colors, typography, borders, shadows, opacity, overflow, and more.

What about unsupported properties?

Unmapped properties are shown at the bottom with Tailwind arbitrary value syntax like [property:value], so you can still use them in your Tailwind markup.

Does it support shorthand properties?

Yes. Properties like margin: 10px 20px, padding: 0 auto, and border-radius: 50% are broken down into their individual Tailwind utilities.

Is this tool free to use?

Yes. All tools on TheToolss are completely free with no usage limits.

Does it work offline?

Yes. All CSS parsing and conversion happens in your browser. No internet connection is needed after the page loads.

CSS to Tailwind Converter

Convert standard CSS properties to equivalent Tailwind CSS utility classes.

100% free
Private in browser
No signup
No watermarks

CSS Input

CSS Properties

Tailwind Classes

30 mapped

.card {
  @apply flex flex-col p-[16px] mt-[8px] mr-auto mb-[8px] ml-auto bg-[#ffffff] rounded-[8px] shadow border-[1px solid #e5e7eb] w-full max-w-[480px] text-sm text-[#374151] opacity-95;
}

.title {
  @apply text-xl font-bold text-black text-center mb-[8px];
}

.button {
  @apply inline-flex items-center justify-center pt-[8px] pr-[16px] pb-[8px] pl-[16px] rounded-[6px] bg-blue text-white text-sm font-semibold cursor-pointer border-[none] w-auto;
}

Rate this tool

Be the first to rate — helps others and improves this page.

About CSS to Tailwind Converter

CSS to Tailwind Converter on TheToolss transforms standard CSS property-value pairs into equivalent Tailwind CSS utility classes. Paste your CSS rules and instantly get the corresponding Tailwind classes. Supports common properties like display, flexbox, spacing, colors, typography, borders, and shadows. Unmapped properties are shown with arbitrary value syntax. All conversion runs client-side in your browser.

How to use CSS to Tailwind Converter

Paste your CSS properties and values into the input box.
The converter instantly shows equivalent Tailwind utility classes.
Unmapped properties are displayed with arbitrary value syntax [property:value].
Copy the generated Tailwind classes to your clipboard.

Key features

Converts common CSS properties to Tailwind utility classes
Supports display, flexbox, grid, spacing, colors, typography, borders
Shows unmapped properties with arbitrary value syntax
Instant real-time conversion as you type
Handles shorthand properties like margin, padding, and border-radius
100% private — no data sent to any server

Frequently asked questions

Which CSS properties are supported?: The converter supports common properties including display, position, flexbox, grid, spacing (margin/padding), colors, typography, borders, shadows, opacity, overflow, and more.
What about unsupported properties?: Unmapped properties are shown at the bottom with Tailwind arbitrary value syntax like [property:value], so you can still use them in your Tailwind markup.
Does it support shorthand properties?: Yes. Properties like margin: 10px 20px, padding: 0 auto, and border-radius: 50% are broken down into their individual Tailwind utilities.
Is this tool free to use?: Yes. All tools on TheToolss are completely free with no usage limits.
Does it work offline?: Yes. All CSS parsing and conversion happens in your browser. No internet connection is needed after the page loads.