Free · No sign-up · Tailwind v3 & v4
Paste CSS,get Tailwind classes.
Paste a stylesheet or a few declarations and get the Tailwind classes for each selector — hover and focus rules as variants, media queries as breakpoints, values snapped to the scale where they fit.
css
.button
text-sm font-semibold text-white inline-flex px-4 py-2 items-center gap-2 rounded-lg bg-[#5e6ad2] hover:bg-[#4b55b8] md:px-6 md:py-3
Runs in your browser — nothing you paste is uploaded or stored.
How to convert CSS to Tailwind, in three steps.
Paste CSS
Whole rules with selectors, or bare declarations for one element. Shorthands like padding, margin, inset and border-radius are expanded first.
Read the classes per selector
:hover, :focus, ::before and friends become variants, min-width media queries become sm: to 2xl:. Values on Tailwind's scale use named classes; the rest use arbitrary values.
Copy them into your markup
Copy one selector's classes or all of them. Every class is valid on both Tailwind v3 and v4. Anything without a Tailwind equivalent is listed rather than dropped silently.
Questions
Does the output work with Tailwind v4?
Yes. Every class is valid on both v3 and v4: where the two versions disagree on a named step (rounded-sm, shadow, blur) the converter writes an arbitrary value instead of guessing.
How are :hover and media queries handled?
Pseudo-classes and pseudo-elements become variants (hover:, focus-visible:, before:), min-width media queries become breakpoint variants (md:, lg:), and the two combine (md:hover:). Media queries Tailwind has no variant for are listed in the notes.
Why do some classes use square brackets?
Values that aren't on Tailwind's default scale, like a specific hex colour or a 13px gap, become arbitrary values such as bg-[#5e6ad2]. Values close to a scale step use the named class.
Is this the same converter as the Xtractly extension?
Yes — the same property-to-class code the extension's Tailwind export runs on a page's stylesheet rules. The extension adds what pasted CSS can't carry: the element's markup, inherited styles and which rules actually apply.
Is my CSS uploaded?
No. Conversion runs in your browser and nothing you paste is sent anywhere or stored.
More free tools, same idea.
Each one runs in your browser and works on tokens you already have.
- tailwind.config.js → @theme
Tailwind v3 → v4 converter
Paste a tailwind.config.js, get the CSS-first v4 theme: @theme, @plugin and @utility.
Open the tool → - :root → @theme
CSS variables → Tailwind
Turn :root custom properties into a Tailwind v4 @theme or a v3 config.
Open the tool → - Tokens → DESIGN.md
DESIGN.md generator
Turn your tokens into a DESIGN.md your coding agent reads before it writes UI.
Open the tool →
Pasted CSS has lost its context.
Read it off any live site.
It doesn't know what an element inherits, which rule wins, or what the markup is. Xtractly's extension reads the rendered element instead and hands back the whole component — markup, hover states and breakpoints — as Tailwind.
Add to Chrome, free