CSS to Tailwind CSS v4 converter
Turn CSS declarations or whole rules into Tailwind CSS v4 classes, with hover and media query variants. Free, no sign up, runs in the browser.
17 of 18 declarations converted, 1 without a utility.
- Utility a named Tailwind class
- Closest a named class with a slightly different value
- Arbitrary exact value in square brackets
- Not converted keep it in CSS
/* .card */
flex flex-col gap-3 p-6 my-0 mx-auto max-w-md bg-[#ffffff] text-[#111827] border border-[#e5e7eb]
rounded-xl shadow-[0_1px_2px_rgb(0_0_0/0.06),0_4px_12px_rgb(0_0_0/0.08)] text-sm/5 transition-shadow
duration-150 ease-out scroll-mt-3.25 hover:shadow-[0_8px_24px_rgb(0_0_0/0.12)] md:p-8
| Selector | Declaration | Tailwind | Match |
|---|---|---|---|
| .card | display: flex | flex | Utility |
| .card | flex-direction: column | flex-col | Utility |
| .card | gap: 12px | gap-3 | Utility |
| .card | padding: 24px | p-6 | Utility |
| .card | margin: 0 auto | my-0 mx-auto | Utility |
| .card | max-width: 448px | max-w-md | Utility |
| .card | background-color: #ffffff | bg-[#ffffff] Tailwind v4 colors are OKLCH tokens, so exact hex values stay arbitrary. Map it to a theme color if one matches. | Arbitrary |
| .card | color: #111827 | text-[#111827] Tailwind v4 colors are OKLCH tokens, so exact hex values stay arbitrary. Map it to a theme color if one matches. | Arbitrary |
| .card | border: 1px solid #e5e7eb | border border-[#e5e7eb] | Arbitrary |
| .card | border-radius: 12px | rounded-xl | Utility |
| .card | box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.08) | shadow-[0_1px_2px_rgb(0_0_0/0.06),0_4px_12px_rgb(0_0_0/0.08)] | Arbitrary |
| .card | font-size: 14px | text-sm/5 | Utility |
| .card | line-height: 20px | Folded into text-sm/5. | Utility |
| .card | transition: box-shadow 150ms ease-out | transition-shadow duration-150 ease-out | Utility |
| .card | scroll-margin-top: 13px | scroll-mt-3.25 | Utility |
| .card | grid-area: main | No Tailwind utility for this property. | Not converted |
| .card:hover | box-shadow: 0 8px 24px rgb(0 0 0 / 0.12) | hover:shadow-[0_8px_24px_rgb(0_0_0/0.12)] | Arbitrary |
| @media (min-width: 768px) .card | padding: 32px | md:p-8 | Utility |
How to use it
- 1Paste CSS: a list of declarations, or rules with selectors, media queries and nesting.
- 2Read the class list per selector, with hover and breakpoint variants applied.
- 3Check the match column: exact utilities, closest named classes, arbitrary values and declarations that were not converted.
- 4Copy the classes onto the element, and keep the rest in CSS.
How the mapping works
Each declaration is matched against Tailwind CSS v4's utilities and default theme: padding: 24px becomes p-6 because the spacing scale is 4px per step, font-size: 14px becomes text-sm, and border-radius: 12px becomes rounded-xl. When a value is on no scale, the tool writes an arbitrary value such as max-w-[420px] or shadow-[0_1px_2px_rgb(0_0_0/0.1)], which Tailwind compiles to exactly your CSS. !important becomes a trailing !, as in p-4!. Selectors and at-rules become variants where that is possible: .card:hover adds hover:, @media (min-width: 768px) adds md:, and @media (prefers-color-scheme: dark) adds dark:. Rules that share a base selector are merged into one class list you can paste onto the element.
/* input */
.card { display: flex; gap: 12px; padding: 24px; font-size: 14px; line-height: 20px; }
.card:hover { box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }
/* output */
flex gap-3 p-6 text-sm/5 hover:shadow-[0_8px_24px_rgb(0_0_0/0.12)]
What stays in CSS
Not everything has a utility. Descendant selectors such as .card .title are listed under their own heading, because Tailwind styles one element at a time. Properties with no utility, grid-area or font-feature-settings for example, are flagged as not converted. Switch on the fallback option to emit them as arbitrary properties like [grid-area:main] if you want everything on the element anyway. Colours are a special case. Tailwind v4 defines its palette in OKLCH and most projects use their own tokens, so a hex value is kept as an arbitrary colour rather than guessed as gray-200. If the value belongs to your theme, swap the arbitrary class for the token name.
Why the result reads differently from your CSS
Some utilities carry more than one declaration. text-sm also sets a 20px line height, which is why the tool folds a matching line-height into text-sm/5 and warns when it cannot. border assumes a solid style because Tailwind's preflight sets it, and transition-colors covers six colour properties at once. The match column says whether a class is exact, the closest named option, or an arbitrary value.
Frequently asked questions
Does it support Tailwind v3?
The output targets v4: important is a trailing !, newer names such as wrap-break-word and rounded-sm (4px) are used, and spacing uses the dynamic scale. Most classes are the same in v3, but check radius sizes and shadows, which changed between versions.
Why is my hex colour not turned into a named colour?
Tailwind v4's palette is defined in OKLCH, so there is rarely an exact hex match, and most projects rely on their own tokens. The arbitrary value is exact; replace it with your token if one exists.
Can it convert a whole stylesheet?
You can paste many rules, including media queries and nesting with &. The output groups classes by selector. Descendant selectors are listed separately because they cannot become a single class list.