Does the converter work for Tailwind v4?

It targets Tailwind v3 conventions, which cover the vast majority of utility class names you'll use. Most output works identically in v4, but a small number of classes have renamed in v4 (like gap-x/gap-y syntax changes). If you're on v4, spot-check the output against the Tailwind v4 docs. For v2, the arbitrary-value syntax (brackets]) isn't supported — you'll need to add custom values to your config instead.

What happens to CSS variables and `var()` references?

They pass through as arbitrary values. A declaration like color: var(--brand) becomes text-var(--brand)], which is valid Tailwind and works at runtime. For cleaner output, add the variable to your Tailwind config's theme section so you can use a named utility class like text-brand instead.

Why didn't my color convert to a Tailwind palette name?

The converter only maps unambiguous color keywords — red, blue, black, white, transparent, and a handful of others — to palette classes. Hex codes, RGB values, and HSL values always fall through to arbitrary values, because mapping #3B82F6 to blue-500 requires knowing that #3B82F6 is the Tailwind default blue-500. That would bake Tailwind's default palette into the converter and break for anyone using a custom palette. Arbitrary values are the correct answer.

Can I paste a full CSS file?

The converter processes one declaration block at a time. If you paste a full CSS file with multiple selectors, it'll extract the declarations from the first block and ignore the rest. For bulk conversions, paste selectors one at a time, or use a build-time tool like twin.macro that compiles CSS-in-JS to Tailwind utility classes automatically.

How does it handle media queries?

It doesn't — media queries are stripped before parsing. You'll need to manually wrap the converted classes with responsive prefixes (md:, lg:, etc.). This is intentional: the converter can't know whether 768px in your CSS corresponds to Tailwind's md breakpoint or something custom in your config. That judgment is yours.

What's the difference between `p-4` and `p-[1rem]`?

Functionally nothing — they both produce padding: 1rem. Semantically, p-4 uses the Tailwind spacing scale and inherits any changes you make to the scale in your config. p-1rem] is a one-off literal value that won't change if you update the scale. Prefer p-4 when the value fits the scale; use p-...] only when it doesn't.

How to Convert CSS to Tailwind (2026 Guide)

⚡

Try CSS to Tailwind

Free, no signup →