CSS to Tailwind converter
Paste CSS rules or plain declarations and get the Tailwind CSS classes that do the same thing. :hover,
:focus and @media rules become hover:, md: and similar prefixes.
A value with no exact Tailwind class is kept exactly as an arbitrary value — never rounded to the nearest step.
.button inline-flex items-center px-4 py-2 border border-[#e5e7eb] rounded-md text-sm font-semibold text-white bg-[#4f46e5] [transition:background-color_0.2s_ease] hover:bg-[#4338ca] md:px-6 md:py-3
- text-sm also sets line-height to 1.428571 (Tailwind pairs every font size with a line height). Add a leading-* class to change it.
- hover: in Tailwind v4 only applies on devices that can hover (it is wrapped in @media (hover: hover)), so taps on phones do not trigger it.
How it converts
- Spacing (padding, margin, gap, width, height, top/left …) uses Tailwind's scale, where one step is
0.25rem (4px):
16px→p-4,10px→p-2.5. Shorthands collapse, sopadding: 8px 16px→px-4 py-2. A value off the scale, such as13px, becomesp-[13px]. - Named scales — font sizes, font weights, line heights, letter spacing, border radius, shadows and
breakpoints — are matched only when the value is exactly Tailwind's. These values are read from the
tailwindcss@4.3.3package itself. - Colours keep their exact value:
#4f46e5→bg-[#4f46e5]. White and black becomewhiteandblackbecause those are exact in Tailwind. - Everything else becomes an arbitrary property, for example
[transition:background-color_0.2s_ease]. It works in Tailwind v4 and does exactly what your CSS did. - Later declarations win, as in CSS:
padding: 16px; padding-top: 0givesp-4 pt-0, but the reverse order gives justp-4.
How we test it
Every class this page can produce is compiled by the real Tailwind CSS 4.3.3 compiler and shown in Chrome next
to an element styled with the original CSS. Across 327 test cases (571 distinct classes) the two
elements have identical computed styles at phone and desktop widths, in light and dark mode, and when hovered.
The only differences we allow are the two this page tells you about when they happen: a named font size such as
text-sm also sets a line height, and rounded-full is Tailwind's pill radius rather than your
exact 9999px.
Questions
Does this work with Tailwind v3?
The output is written for Tailwind v4. Most classes also work in v3, but not all: v3 has no spacing values off its old
fixed scale (such as p-13), puts ! for !important at the front instead of the end, and
v4 renamed the radius and shadow sizes — v4's rounded-sm is v3's rounded, and v4's
shadow-sm is v3's shadow. Check those classes if your project is still on v3.
Why are some classes in square brackets?
Square brackets are Tailwind's arbitrary values. We use them when Tailwind has no class with exactly your value, so converting never changes how your page looks. If you would rather use the nearest Tailwind step, change the value in your CSS first and convert again.
What about hover on phones?
In Tailwind v4, hover: only applies on devices that can hover, so a tap on a phone does not trigger it.
Your original :hover rule did trigger on tap. The converter adds a note whenever this applies.
What can't be converted?
@keyframes, @font-face and other at-rules have no class equivalent, so the output tells you to
keep them in your CSS. A selector like .card .title gets its own group of classes; put those classes on the
element that selector matches.
Building a colour scale too? Try the Tailwind shade generator or browse every Tailwind CSS color.