CSS to Tailwind Converter
Paste a CSS rule or a list of declarations and get Tailwind v4 utility classes back. Everything runs in your browser, nothing is uploaded.
Your CSS
Tailwind classes
flex flex-col gap-4 p-6 bg-white border border-gray-200 rounded-xl text-sm font-semibold text-cyan-700 shadow-[0_1px_3px_rgba(0,0,0,0.1)] max-w-md [transition:all_0.2s]
12 of 13 declarations mapped to utilities, 1 used arbitrary properties like [prop:value].
| CSS declaration | Tailwind class |
|---|---|
| display: flex | flex |
| flex-direction: column | flex-col |
| gap: 16px | gap-4 |
| padding: 24px | p-6 |
| background-color: #ffffff | bg-white |
| border: 1px solid #e5e7eb | border border-gray-200 |
| border-radius: 12px | rounded-xl |
| font-size: 14px | text-sm |
| font-weight: 600 | font-semibold |
| color: #0e7490 | text-cyan-700 |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) | shadow-[0_1px_3px_rgba(0,0,0,0.1)] |
| max-width: 28rem | max-w-md |
| transition: all 0.2s | [transition:all_0.2s] |
Frequently asked questions
How does the CSS to Tailwind converter work?
It reads each declaration, maps it to the closest Tailwind utility (for example padding: 16px becomes p-4), snaps colors to the nearest palette color when they are close enough, and falls back to an arbitrary property like [transition:all_0.2s] when no utility fits.
Which Tailwind version does it target?
Tailwind CSS v4. For example, a 4px radius becomes rounded-sm and a 2px radius becomes rounded-xs, which matches the v4 naming.
What are arbitrary properties?
Tailwind lets you write any CSS property directly as a class with square brackets, such as [mask-type:luminance]. They work like normal utilities, so you can use variants like hover: in front of them.
Does it handle selectors, media queries or pseudo-classes?
It converts the declarations inside rules. Selectors are ignored, and media queries or pseudo-classes need to be converted by hand into prefixes like md: or hover:.
Guides that go with this tool
More free Tailwind CSS tools
More free tools & components
Keep going with another tool, or grab a ready-made component.