CSS to Tailwind Converter
Turn CSS into Tailwind classes, or Tailwind classes into plain CSS, for v4 or v3.
CSS
Rules, media queries, nested rules or just declarations. The result updates as you type.
Tailwind classes
- exact theme class
- nearest rounded to the theme
- [value] arbitrary value
- [property] arbitrary property
Live preview
About the CSS to Tailwind Converter
Paste CSS and get the Tailwind CSS classes for each element: .btn { padding: 8px 16px } becomes px-4 py-2, :hover rules become hover: classes and media queries become md: and the other breakpoints. Or go the other way: paste Tailwind classes, or HTML with class="…" attributes, and get plain CSS without Tailwind’s variables.
The converter knows the default themes of Tailwind CSS v4 (from its 4.3 release) and v3 (from 3.4). It proposes a class only after working out that the class writes exactly the CSS it replaces; when no theme class has your value it uses an arbitrary value such as p-[13px], and for properties without a utility an arbitrary property such as [mask-type:alpha], so no declaration is lost. A live preview draws your CSS and the classes side by side. Everything runs in your browser.
How to use it
- Choose CSS → Tailwind or Tailwind → CSS, and your Tailwind version (v4 is the current one; v3 projects have a
tailwind.config.js). - Paste CSS — whole rules, media queries, nested rules or just declarations — or pick one of the Examples. The result follows as you type.
- Read the classes for each element. Open Where each class comes from to see the CSS behind each class and why a class is an arbitrary value. Notes say when an element needs a
grouporpeerclass, or when a class does a little more than your CSS. - To round to Tailwind’s scale instead of keeping exact values, choose Nearest theme values: every rounding is listed with the value it replaced.
- Check the Live preview: your CSS on the left, the classes on the right, in the normal state or with hover, focus, breakpoints and other states ticked.
- Copy one element’s classes, Copy all, or switch to @apply CSS to keep the class names of your stylesheet. Download saves the result.
Examples
.btn { padding: 8px 16px; border-radius: 8px; background-color: #2563eb; color: #fff; font-weight: 600 }
.btn:hover { background-color: #1d4ed8 }px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700
In v4 the same CSS gives bg-[#2563eb] and hover:bg-[#1d4ed8]: v4 redefined its palette in OKLCH, so its blue-600 is a slightly different colour. Nearest theme values gives bg-blue-600 and says how far apart the two are.
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)) } }grid grid-cols-2 gap-6 lg:grid-cols-4
.card:hover .title { color: #4f46e5 }.card: group .title: group-hover:text-indigo-600
Tailwind writes a parent’s state on the child as group-hover:; the parent needs the class group. A sibling’s state (input:checked + label) becomes peer-checked: with peer on the earlier sibling.
px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-500 md:px-6
.element {
padding-inline: 1rem;
padding-block: 0.5rem;
border-radius: 0.5rem;
background-color: oklch(51.1% 0.262 276.966);
color: #fff;
}
@media (hover: hover) {
.element:hover {
background-color: oklch(58.5% 0.233 277.117);
}
}
@media (width >= 48rem) {
.element {
padding-inline: 1.5rem;
}
}Values are resolved (rem instead of var(--spacing)) and the rules come in Tailwind’s order: states, then screens from small to large, so the cascade is the same as with Tailwind.
Common uses
- Moving a component from a CSS file or a CSS-in-JS style object into Tailwind classes.
- Rewriting a design handed over as CSS (from a browser’s inspector or a design tool’s code panel) in Tailwind.
- Checking which Tailwind class a value corresponds to, and whether it is exact.
- Turning Tailwind classes into plain CSS to leave Tailwind, write an e-mail template, or see what a class list really does.
- Writing
@applyrules that keep a stylesheet’s own class names while using Tailwind’s scale.
How exact the classes are
In Exact values mode a theme class is used only when it writes the same value as your CSS — 16px is 1rem at the usual 16 px root size, #fff is white, rgba(0,0,0,.5) is black/50. Everything else keeps your value as an arbitrary value. A few Tailwind classes do slightly more than one declaration, and the converter says so:
- Font sizes such as
text-smalso set a line height unless aleading-*class is present. - Transitions:
transition: opacity 0.2suses the browser’s default timing (ease), while Tailwind’s transition classes usecubic-bezier(0.4, 0, 0.2, 1), so the exact result addsease-[ease]. - Gradients: browsers blend gradients of hex and
rgb()colours in sRGB, Tailwind v4 in OKLab, so the exact v4 result adds/srgb(bg-linear-to-r/srgb). - Borders:
borderandborder-2draw solid lines because Tailwind’s base styles (Preflight) give every elementborder-style: solid; v3’s Preflight also colours borders gray-200, so a border without a colour getsborder-currentthere.
In v4, px-4 and mx-auto write padding-inline and margin-inline, which equal left and right in horizontal text.
Selectors and media queries
Each rule’s last selector part is the element that gets the classes; the rest becomes variants:
:hover,:focus-visible,:disabled,:first-child… →hover:,focus-visible:,disabled:,first:;::before→before:.[aria-expanded="true"]→aria-expanded:;[data-state=open]→data-[state=open]:.- A parent’s or an earlier sibling’s state →
group-hover:orpeer-checked:(and thegrouporpeerclass for that element). @media (min-width: 768px)→md:;(max-width: 767px)→max-md:; other widths →min-[900px]:;prefers-color-scheme: dark→dark:;print,prefers-reduced-motion,@supports (…)→print:,motion-reduce:,supports-[…]:.- A plain context such as
.nav astays the element’s description (“the a elements inside .nav”); a context with its own state becomes an arbitrary variant such as[.menu:hover_&]:.
Rules for the same element are merged as the cascade would: a later declaration replaces an earlier one, and !important wins (written !p-2 in v3 and p-2! in v4).
Tailwind classes to CSS
Paste a class list, or HTML or JSX with class / className attributes: each element gets its own rule, named after a class of its own that is not a Tailwind class (card in class="card p-6"), otherwise after its tag. The CSS has no Tailwind variables: spacing is in rem, v4 colours are written in OKLCH as Tailwind’s theme defines them, hover: keeps v4’s @media (hover: hover), and animate-spin comes with its @keyframes. Classes that are not Tailwind classes of the chosen version, older names that still work (bg-gradient-to-r in v4 is now bg-linear-to-r) and two classes that set the same property are listed.
Limitations
- Only Tailwind’s default themes are known: colours, sizes and breakpoints you added in
tailwind.config.jsor@themebecome arbitrary values, and plugin classes are not recognised in Tailwind → CSS. dark:is converted with Tailwind’s default dark mode, theprefers-color-schememedia query; projects that switch dark mode with a class configure the variant differently.@keyframes,@font-face,@importand@propertyare listed but not converted; keep them in your CSS.- Complex selectors (
:not(),:is(), several states in the context) become arbitrary variants, which work but are less readable than writing the classes on the right elements. - The preview applies the declarations to one sample element: pseudo-elements (
::before), child rules (space-x-*,divide-*), container queries, pictures from other sites and fonts that are not installed on this device are not drawn. - Input of up to 200,000 characters at a time.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Does it support Tailwind CSS v4?
Yes, v4 is the default, with the theme and the utilities of its 4.3 release: OKLCH colours, the dynamic spacing scale (p-3.75, w-300), bg-linear-* gradients, inset-shadow-*, text-shadow-*, the container-query classes (@container, @sm:), scrollbar-*, zoom-*, tab-* and variants such as not-hover:, in-focus: and details-content:. Choose Tailwind CSS v3 for projects on v3.4, which use different colour values, a fixed spacing scale and names such as bg-gradient-to-r.
Why do I get bg-[#2563eb] instead of bg-blue-600?
Because the colour is not exactly a palette colour of the version you chose. #2563eb is v3’s blue-600, but v4 defines its palette in OKLCH and its blue-600 is a slightly different blue. Switch to Nearest theme values to use the closest palette colour; the note shows the colour difference (ΔE, in hundredths of OKLab units: the CSS Color specification treats 2 on this scale as just noticeable).
What are arbitrary values and arbitrary properties?
Tailwind’s syntax for values outside the theme: w-[37px], bg-[#bada55] or grid-cols-[repeat(3,1fr)] set a utility’s property to any value, with _ standing for a space. [mask-type:alpha] writes any property and value. Both are generated on demand by Tailwind’s compiler and work like any other class.
Why does margin: 0 auto give mx-auto my-0?
Because the shorthand sets all four sides: left and right to auto and top and bottom to 0. Tailwind’s Preflight already sets every element’s margins to 0, so my-0 (and py-0 for padding: 0 24px) can usually be deleted; they are kept so that the classes override any other margin, as your CSS does.
Where do the group and peer classes go?
On the element whose state matters. For .card:hover .title put group on the .card element and group-hover:… on .title; for input:checked + label put peer on the input and peer-checked:… on the label, which must come after the input in the same parent.
Can it convert Tailwind classes back to CSS?
Yes: choose Tailwind → CSS and paste the classes or your HTML. Each element gets a rule with the plain CSS of its classes, including the media queries and states, ready to copy or download as a .css file.
Is my CSS uploaded?
No. The conversion and the preview run in your browser and nothing is sent to MySmartCoPilot or anyone else. Your last input and settings are kept in this browser’s storage so a reload does not lose them.