Free tool No sign-up
CSS to Tailwind Converter
Paste any CSS and instantly get the Tailwind CSS class equivalents — supports 400+ properties with arbitrary value fallback.
tailwindcssconverterutilitytool
Why use Tailwind CSS?
Write less, ship faster
Tailwind utility classes replace multi-line CSS rules with single classes. No more context-switching between files — styles live right in your markup.
Automatic dead-code elimination
Tailwind scans your files and only ships the classes you actually use. Your final CSS bundle is typically under 10 kB, compared to hundreds of kB with hand-rolled CSS.
Built-in design system
Tailwind's default scale covers spacing, type, colour, shadows, and more. Every project starts from the same consistent foundation without writing a single token.
Highly customisable
Override or extend any part of the default theme in tailwind.config. Add custom colours, spacing, fonts, or breakpoints — and still get the same utility-class output.
How to use this converter
01
Paste your CSS
Copy any CSS rule block — a class, an ID, or inline styles — and paste it into the input panel on the left.
02
Instant conversion
The converter reads each CSS property and maps it to the closest Tailwind utility class. Unmapped properties get an arbitrary-value fallback like [property:value].
03
Copy the classes
Click Copy to grab the space-separated class string and paste it directly onto your HTML element or JSX component.
04
Review arbitrary values
Check any [bracket] classes — these mean Tailwind has no built-in equivalent. Consider adding a custom token in your tailwind.config for values you use often.
Common CSS → Tailwind mappings
| CSS property | Tailwind class |
|---|---|
display: flex | flex |
flex-direction: column | flex-col |
align-items: center | items-center |
justify-content: between | justify-between |
padding: 16px | p-4 |
margin-top: 8px | mt-2 |
font-size: 14px | text-sm |
font-weight: 600 | font-semibold |
color: #fff | text-white |
background-color: #000 | bg-black |
border-radius: 8px | rounded-lg |
box-shadow: ... | shadow-md |
Conversion patterns
@apply
.btn {
@apply flex items-center gap-2 px-4 py-2
rounded-lg bg-violet-600 text-white
font-semibold text-sm hover:bg-violet-700;
} Arbitrary
/* CSS */
.hero { width: 720px; font-size: 13px; }
/* Tailwind */
<div class="w-[720px] text-[13px]"> Responsive
/* CSS */
@media (min-width: 768px) {
.card { flex-direction: row; }
}
/* Tailwind */
<div class="flex-col md:flex-row"> Pro tips
01
Use @apply for repeated patterns
If the same utility group appears on many elements, extract it with @apply inside a CSS class. This keeps your HTML clean without losing Tailwind's purge benefits.
02
Arbitrary values for one-offs
For values outside Tailwind's scale (e.g. a 13px font or a 340px width), use arbitrary values: text-[13px], w-[340px]. No config change needed.
03
Responsive prefixes
Add sm:, md:, lg:, xl: prefixes to any utility to apply it at that breakpoint and above. Converted classes need these added manually based on your CSS media queries.
04
Dark mode with dark:
Tailwind's dark: variant replaces CSS prefers-color-scheme media queries. Enable it with darkMode: "class" or "media" in your config.