Turning a stylesheet into utility classes is mostly mechanical — display: flex
is flex, padding: 8px 16px is px-4 py-2 — with a few rules for states,
breakpoints and values that aren't on Tailwind's scale.
Convert a stylesheet
Paste the CSS into the free CSS → Tailwind converter: whole rules with selectors, or bare declarations for one element.
Read the classes for each selector. Copy one selector's classes or all of them.
Check the notes for anything without a Tailwind equivalent (@keyframes,
unusual selectors, media queries with no variant).
The rules it follows
- Shorthands
padding,margin,insetandborder-radiusare expanded to their sides first, then collapsed back top-,px-/py-or per-side classes.- States
:hover,:focus-visible,:disabled,::before,::placeholderand friends become variants:hover:bg-….- Breakpoints
@media (min-width: 768px)becomesmd:; v4's(width >= 48rem)syntax works too. The two combine:md:hover:.- Scale values
- Values on or close to Tailwind's spacing, type and radius scales use the named class (
gap-4,text-sm,rounded-lg). - Everything else
- Arbitrary values in square brackets:
bg-[#5e6ad2],shadow-[0_1px_2px_rgba(0,0,0,.05)]. - v3 and v4
- Where the two versions disagree on a named step (
rounded-sm,shadow,blur), an arbitrary value is used, so every class works on both.
Why pasted CSS is only half the story
A rule in a stylesheet doesn't know what its element inherits, which other
rules override it, or what the markup looks like. Converting the rendered
element avoids all three: the Xtractly extension's Extract tool reads the
computed styles of the element you click — plus its :hover rules and media
queries — and hands back the whole component as HTML, React, Vue or Svelte
with Tailwind classes. It's the same property-to-class code the converter
runs. See the extension.