~/frontend-tools/css-to-tailwind-converter
CSS to Tailwind Converter
Paste CSS rules and get the Tailwind classes for each selector. Common properties such as display, flex, spacing, sizing, typography and borders map to standard utilities; anything without an exact match becomes a precise arbitrary value, so the result always reproduces your CSS.
Using the CSS to Tailwind Converter
How the mapping works
Each declaration is checked against Tailwind's default scale. Spacing values that fall on the 4px grid become standard steps (16px becomes 4, so p-4), common keywords map directly (display: flex becomes flex), and font sizes, weights, radii and line heights use the named steps where they match exactly.
Exact arbitrary values
When a value is off the scale, such as 13px of padding or a brand hex colour, the converter writes an arbitrary value like p-[13px] or bg-[#121722]. For properties Tailwind has no utility for, it uses an arbitrary property, [property:value]. Spaces become underscores, as Tailwind requires.
Pseudo-classes and media queries
Selectors ending in :hover, :focus or :active get the matching variant prefix, and rules inside common min-width media queries get the responsive prefix (md:, lg: and so on) when the breakpoint matches Tailwind's defaults.
Check the result
Tailwind classes depend on your theme. If you have customised spacing or colours, review the output. Complex selectors that cannot become classes on a single element, such as .a .b, are listed separately with their classes so you can decide where they belong.
Frequently asked questions
Is the output Tailwind v3 or v4?
The class names here are valid in both. Arbitrary values and arbitrary properties work the same way in each.
Why do I see [property:value] classes?
That is Tailwind's arbitrary property syntax, used for CSS that has no built-in utility. It is valid and exact.
Can it convert the other way?
Yes. Use the Tailwind to CSS converter.