Paste ordinary CSS rules and this converter returns a Tailwind v4 class list for each selector, using named classes where the default theme has an exact match and arbitrary values such as w-[37px] where it does not. Flip the direction to turn a class list back into CSS. Selectors and rules that cannot become classes are listed, never silently dropped.
| CSS | Tailwind | Why |
|---|---|---|
| padding: 16px 24px | py-4 px-6 | Spacing steps are 0.25rem, so 16px is step 4 |
| width: 37px | w-[37px] | Not a whole or half step, so an arbitrary value |
| border-radius: 12px | rounded-xl | rounded-xl is 0.75rem in the default theme |
| justify-content: space-between | justify-between | Direct keyword match |
| box-shadow: 0 1px 2px #0001 | [box-shadow:0_1px_2px_#0001] | Written as an arbitrary property; spaces become underscores |
| @media (min-width: 768px) | md: prefix | md starts at 48rem, which is 768px |
Updated
Moving a stylesheet into Tailwind by hand means looking up dozens of class names and doing pixel to rem arithmetic in your head. This converter does the lookup and the maths, shows which classes are arbitrary values you might want to round to the scale, and tells you plainly which rules have to stay in a CSS file.
Paste CSS rules or a Tailwind class list. Arbitrary values are highlighted and anything that cannot be converted is listed below the result.
A card rule with a hover state and a tablet breakpoint.
.card {
display: flex;
padding: 16px 24px;
gap: 1rem;
border: 1px solid #e5e5e5;
border-radius: 12px;
}
.card:hover { background-color: #f8fafc; }
@media (min-width: 768px) {
.card { padding: 32px; }
}Each declaration becomes a class; the hover and breakpoint rules become prefixed classes on the same element.
<div class="flex py-4 px-6 gap-4 border border-[#e5e5e5] rounded-xl hover:bg-[#f8fafc] md:p-8">...</div>Start with the components you touch most and convert one selector at a time. Paste the converted classes into the markup, delete the old rule, and check the page before moving on.
Leave complex selectors, animations and third-party overrides in CSS. Tailwind works alongside normal stylesheets, and forcing everything into classes usually makes markup harder to read.
Named classes are values that already exist on the default scale. Highlighted classes are arbitrary values: correct, but outside your design system, so they are the first place to look for near misses.
Shorthands are expanded per side. padding: 8px 16px becomes py-2 px-4, and a four-value margin becomes mt, mr, mb and ml classes.
Tailwind v4 with the default theme. Spacing is calculated from the 0.25rem --spacing value, radius names follow the v4 scale (rounded-xs is 2px, rounded-sm 4px, rounded-md 6px and so on), and breakpoints use the v4 rem values.
A named class is used only when it gives exactly the same value. Colours always become arbitrary values because a hex code rarely matches a palette shade exactly, and font sizes stay arbitrary because named text sizes also set a line height.
Selectors with descendants, siblings or attributes, media queries that are not a single min-width, keyframes and other at-rules, and custom properties. They appear in the not converted list so you can move them to your CSS file.
Classes in the converter's table, arbitrary values and arbitrary properties come back exactly, with spacing shown as rem values that assume the default --spacing. Theme colour names such as bg-blue-500 and preset shadows are not in the table and are listed as skipped rather than guessed.
No, but the arbitrary property syntax [property:value] covers anything Tailwind does not have a utility for, such as [mask-type:luminance]. This converter uses it for any property it does not recognise.
Related: Tailwind cheat sheet, PX to REM converter, Tailwind vs Bootstrap, Tailwind colour palette generator, CSS formatter.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.