Guides CSS
How to convert a website's CSS to Tailwind
Install Verbatim, the free Chrome extension, and open the page. Press Alt+Shift+P, choose Pick element, click the element, then switch the window to the Tailwind tab. You get the selection as utility classes for v3 or v4, plus the theme values those classes depend on, converted from the rules that actually applied rather than from a CSS string you pasted.
What you need first
Verbatim is a free Chrome extension that reads the CSS actually applying to a live page, by resolving the cascade rather than dumping computed styles. Thirteen tools sit on a toolbar inside the page itself, not in a popup: pick an element, measure it, pull the palette and type scale, turn the page into a prompt, or hand any of it to a coding agent.
It is free forever with no account and no sign in, nothing is uploaded anywhere, and it works in Chrome, Edge, Brave, Arc and Opera. Install it, then follow the steps below on any page, including one behind a login.
Why a CSS-to-Tailwind converter usually disappoints
Most converters take a block of CSS you pasted and map declarations to utilities. That is the easy part of the problem, and it is not the part that goes wrong.
| Route | What it converts | What is missing |
|---|---|---|
| Paste CSS into a converter | The declarations you pasted, one for one. | Everything you did not paste: the states, the media queries, the inherited values, the rules on the children, and the tokens the values came from. |
| Copy computed style, then convert | Every resolved declaration on one element. | Hover and focus become nothing. Media queries become nothing. Custom properties are already flattened into literals, so every value lands as an arbitrary value. |
| Ask an AI to convert a screenshot | Plausible utilities in the right shape. | Correct numbers. It will produce p-4 where the page uses 13.5px, and nothing will flag the difference. |
| Convert from the resolved cascade | The rules that actually applied, with states as variants, breakpoints as responsive prefixes, and token values kept as theme entries. | Selectors that have no utility form. Those are listed as CSS rather than silently dropped. |
The distinction is the same one behind copying CSS from a website at all: a converter can only convert what it was given, and what a computed-style copy gives it is already missing the five things that decide how the element looks.
How to convert a website element to Tailwind, step by step
The conversion happens on the same pick. Switching tabs does not re-read the page.
- Add Verbatim to Chrome. It is a free extension, there is no account and no sign in, and it works in Chrome, Edge, Brave, Arc and Opera.
- Open the page and press Alt+Shift+P, or click the Verbatim icon.
- Choose Pick element and click the element or component you want.
- Switch the window to the Tailwind tab.
- Choose v4 or v3. The difference is real: v4 emits a
@themeblock, v3 emits config-shaped values. - Turn the theme block on if your project does not already define these tokens. Utilities alone are not portable without them.
- Copy, paste, and check it against the live preview underneath the code before you commit it.
The preview underneath is rendered from the extraction, so it is the fastest check available: if the preview matches the live element, the values are right, and only the mapping is left to review.
Arbitrary values, and when to keep them
Real pages are not built on a Tailwind scale, so a faithful conversion produces arbitrary values: p-[13.5px], text-[#2E6FF2], rounded-[7px]. This is correct, and it is also a decision point.
- Keep them when you are matching a reference exactly, for a one-off component or a client rebuild. The numbers are the point.
- Snap them to your own scale when the component is joining a design system you already maintain. 13.5px becomes
p-3.5and you accept the half-pixel difference deliberately rather than by accident.
The useful part is that you are choosing. A tool that silently rounds has made the decision for you, and you find out in review.
Tailwind v3 and v4 are not the same output
Version 4 moved the design tokens out of a JavaScript config and into CSS, so the same selection emits two different things.
- v4 emits a
@themeblock: custom properties in a CSS file, which is also why a v4 theme reads almost like the:rootblock the original site shipped. - v3 emits the same values shaped for
tailwind.config.js, undertheme.extend.
Pick the one your project is on. Pasting a v4 @theme block into a v3 project produces utilities that do not exist, which is a confusing ten minutes.
For a whole page rather than one component, the same values come out at page scale: Design system exports the entire palette, type scale, spacing and radii as Tailwind @theme, CSS variables or W3C design tokens. That is the faster route when you are adopting a whole look rather than one card.
States and breakpoints become variants
This is where converting from the cascade pays off. A hover rule found by matching selectors becomes hover:. A rule inside @media (min-width: 768px) becomes md:, including one that does not apply at your current window width.
A converter fed a computed style has neither, because neither survives computation. You would get a component that looks right at one width and does nothing on hover, and you would not know what was missing until someone used it.
What does not convert to utilities, and what to do about it
Some CSS has no utility form, and pretending otherwise produces broken output. These come out as CSS alongside the classes rather than being dropped:
- Complex selectors: sibling combinators,
:not()chains,:nth-childpatterns beyond the simple cases. @keyframesand anything animating with a custom timing function.- Pseudo-element content that carries actual content rather than decoration.
- Anything depending on
@layerordering to win, which Tailwind's own layering will not reproduce by accident.
Keep those as a small CSS file next to the component. A component that is 90% utilities and 10% honest CSS is a normal, maintainable outcome, and a much better one than 100% utilities that do not match.
Questions
How do I convert a website CSS to Tailwind?
Pick the element with the extension, then switch the window to the Tailwind tab and choose v3 or v4. The conversion is made from the rules that actually applied to that element, including its states and breakpoints, rather than from a block of CSS pasted into a converter.
Does it output Tailwind v4 or v3?
Both, as a switch on the same pick. v4 emits a @theme block of custom properties in CSS; v3 emits the same values shaped for theme.extend in tailwind.config.js. Pasting one into a project running the other produces utilities that do not exist.
Will I get arbitrary values like p-[13.5px]?
Yes, wherever the page does not sit on a Tailwind scale, and that is the faithful answer. Keep them when you are matching a reference exactly; snap them to your own scale when the component is joining a system you maintain. The point is that the choice is yours rather than a silent rounding.
Does it convert hover states and media queries?
Yes. States found by matching selectors become hover:, focus: and active: variants, and media queries become responsive prefixes such as md:, including breakpoints that do not apply at your current window width.
Why do I need the theme block as well as the classes?
Because utilities are not portable on their own. If the design depends on tokens your project does not define, the classes will compile to nothing or to the wrong values. The theme block carries the values those classes refer to.
Can it convert a whole page to Tailwind?
Page-level values, yes: the Design system tool exports the whole palette, type scale, spacing and radii as a Tailwind theme. Page-level markup, no, and no tool should claim to. Convert component by component and keep the theme shared.
What if some CSS has no Tailwind equivalent?
It is emitted as CSS beside the classes rather than dropped. Complex selectors, keyframes and layer-dependent rules have no utility form, and a component that is mostly utilities plus a small CSS file is the normal, correct outcome.