How to use the CSS to Tailwind Converter
- 1. Paste your CSSPaste whole rules, media queries, or just a list of declarations.
- 2. ConvertEach selector gets its Tailwind classes, with prefixes for states and breakpoints.
- 3. Copy the classesCopy them into your class attributes, or download the list.
How the conversion works
Every declaration is matched against Tailwind's default theme. A scale name is used only when it is exactly equal: padding: 16px becomes p-4 because Tailwind's p-4 is 1rem, but padding: 13px becomes p-[13px] so nothing shifts. Shorthands are split sensibly, for example padding: 12px 24px becomes py-3 px-6. :hover, :focus and similar selectors become hover: and focus: prefixes, and min-width media queries that match Tailwind's breakpoints become sm:, md:, lg:, xl: or 2xl:. Properties with no utility become [property:value] classes. Your code is processed in your browser and never uploaded.
We compiled 161 randomly generated rules with Tailwind 3.4.17 and compared computed styles in Chromium: all 161 matched the original CSS. Breakpoint and state prefixes follow Tailwind's documented rules but were tested only on the sample.
Worked example
The sample is an orange button with hover and tablet styles. The tool returns 14 classes for 1 selector, 3 with arbitrary values: inline-flex items-center gap-2 py-3 px-6 text-sm font-semibold text-white bg-[#ff5421] rounded-lg shadow-[0_4px_12px_rgba(255,_84,_33,_0.3)] hover:bg-[#e0441a] md:py-4 md:px-8. font-size: 14px with line-height: 20px becomes text-sm, because that class sets exactly those two values.
Good to know
- Class names follow Tailwind v3.4's default theme; a customised tailwind.config changes the scale.
- Most names also work in Tailwind v4, but v4 renamed some shadow and rounded sizes, so check those.
- Complex selectors such as
.a .b > .care listed separately, since classes go on one element at a time.
Frequently asked questions
Does it handle max-width media queries?
Yes, as arbitrary variants such as max-[767px]:, which need Tailwind 3.2 or later. Dark-mode queries become dark:.
Why do I see arbitrary values?
Your value isn't on Tailwind's scale. Arbitrary values keep the design pixel-perfect; round them to the scale if you prefer consistency.
Is the CSS to Tailwind converter free?
Yes. You can open the CSS to Tailwind converter, paste code and change every setting without signing up. When you convert CSS for the first time, we ask once for your name and WhatsApp number; after that it, and every other Uncodemy tool, opens straight away.