How does it pick the closest color match?

By computing the squared RGB distance between your CSS color and every entry in Tailwind's default palette, picking the lowest. So a hex like #3b82f6 maps exactly to bg-blue-500 (which IS that hex). For #3a82f5 (1-bit different), it still maps to blue-500 because that's the closest. Use arbitrary value `bg-[#3a82f5]` if exact precision matters.

Why don't all my CSS properties show up in the output?

Properties Tailwind doesn't have a default utility for (e.g. `caret-color`, `mix-blend-mode`, `clip-path`, custom `transform-style`) get flagged in the output as 'no Tailwind equivalent — keep as inline CSS' or 'use arbitrary value'. The tool doesn't silently drop them.

Can I convert media-query-wrapped CSS?

Yes — `@media (min-width: 768px)` becomes the `md:` prefix, 1024px → `lg:`, 1280px → `xl:`, 1536px → `2xl:`. Custom breakpoints don't map; the tool uses Tailwind's defaults.

What about CSS variables (--my-color)?

Tailwind v3 doesn't natively support CSS variables in arbitrary values without configuration. The tool flags `var(--…)` references and suggests adding the variable to your tailwind.config.js or using arbitrary values like `bg-[var(--my-color)]`.

Does it support pseudo-classes beyond hover/focus?

Yes — `:active`, `:disabled`, `:checked`, `:first-child`, `:last-child`, `:hover`, `:focus`, `:focus-visible`, `:focus-within` all map to their Tailwind equivalents (`active:`, `disabled:`, `checked:`, `first:`, `last:`, etc.). Less common pseudo-classes may not have a Tailwind utility.

Developer Utilities · Free tool

CSS to Tailwind

Convert any classic CSS rule directly into equivalent Tailwind utility classes for a faster migration. Free online tool, instant conversion, no signup.

Updated June 2026

CSS

Tailwind classes

flex py-4 px-6 bg-white rounded-[12px] text-sm text-[#111827]

Found this useful?Email Buy Me a Coffee

What it does

Paste a CSS rule (one selector and its declarations) and get back the equivalent Tailwind utility classes you'd add to your markup. Useful for migrating an existing project to Tailwind one component at a time, converting design-tool exports (Figma's CSS export, Tailgrabs, paste from Webflow), onboarding existing CSS to a Tailwind- first codebase, or reverse-engineering a CSS-styled component your team prefers in utility-class form.

The conversion handles common properties: spacing (padding, margin → p-*, m-*); colors (background-color, color, border- color → matched to the closest Tailwind palette entry); layout (display, flex, grid → flex / grid utilities); typography (font-size, line-height, letter-spacing, font-weight, text-transform); effects (border-radius, box-shadow, opacity, transform); responsive (media queries map to sm: / md: / lg: / xl: prefixes); pseudo-classes (:hover → hover:, :focus → focus:).

Properties without a clean Tailwind equivalent (calc() values, complex custom shadows, non-default cubic-bezier easings, exotic CSS variables) get flagged with a note — you'll need an arbitrary-value Tailwind class (p-[12.5px]) or keep them as inline CSS. Output assumes the default Tailwind v3 theme; for custom themes the result may need adjustment to match your project's tokens.

Embed this tool on your siteShow snippet

Paste this snippet into any page. Loads on-demand (lazy), no tracking scripts, and sized to most dashboards. Replace the height to fit your layout.

<iframe src="https://freetoolarena.com/embed/css-to-tailwind" width="100%" height="720" frameborder="0" loading="lazy" title="CSS to Tailwind" style="border:1px solid #e2e8f0;border-radius:12px;max-width:720px;"></iframe>

Embed docs →

Example input & output

Input

.btn { padding: 8px 16px; background-color: #3b82f6; color: white; border-radius: 6px; }

Output

px-4 py-2 bg-blue-500 text-white rounded-md

Each declaration converts to one or two utility classes. The blue color matches Tailwind's `blue-500` exactly (#3b82f6). For a non-matching color, the tool falls back to arbitrary values like `bg-[#3a82f5]`.

How to use it

Paste your CSS into the input. One full rule (selector + declarations) at a time gives the best results.
Tailwind classes appear in the output box live as you type or paste.
Copy the classes and paste them into your markup's `className` attribute.
Properties that don't have a clean Tailwind equivalent are flagged — for those, use an arbitrary value (e.g. `pt-[13px]` for `padding-top: 13px`) or keep them as inline style.
For multi-rule CSS (multiple selectors), paste them one at a time. The tool processes one rule per conversion.

When to use this tool

Migrating an existing project from custom CSS to Tailwind, one component at a time.
Converting Figma's CSS export to Tailwind for use in a new component.
Reverse-engineering a CSS-styled component into utility classes for consistency with the rest of a Tailwind codebase.
Onboarding designers who think in CSS to a utility-first approach by showing equivalences side-by-side.

When not to use it

Custom-theme tokens — the conversion uses Tailwind's default theme. If your project has custom colors, spacing, or fonts, the result won't match your tokens.
Highly specific exotic CSS (clip-path, complex backdrop-filter, mask-image with multiple layers) — no clean Tailwind equivalent; keep as inline CSS or use arbitrary values.
Tailwind v4 alpha syntax — the converter targets v3 conventions. v4's CSS-first config and native cascade layers aren't accommodated.
Complete page conversion — the tool is per-rule. For a full migration, work through components individually with this as a starting point.

Frequently asked questions

How does it pick the closest color match?: By computing the squared RGB distance between your CSS color and every entry in Tailwind's default palette, picking the lowest. So a hex like #3b82f6 maps exactly to bg-blue-500 (which IS that hex). For #3a82f5 (1-bit different), it still maps to blue-500 because that's the closest. Use arbitrary value `bg-[#3a82f5]` if exact precision matters.
Why don't all my CSS properties show up in the output?: Properties Tailwind doesn't have a default utility for (e.g. `caret-color`, `mix-blend-mode`, `clip-path`, custom `transform-style`) get flagged in the output as 'no Tailwind equivalent — keep as inline CSS' or 'use arbitrary value'. The tool doesn't silently drop them.
Can I convert media-query-wrapped CSS?: Yes — `@media (min-width: 768px)` becomes the `md:` prefix, 1024px → `lg:`, 1280px → `xl:`, 1536px → `2xl:`. Custom breakpoints don't map; the tool uses Tailwind's defaults.
What about CSS variables (--my-color)?: Tailwind v3 doesn't natively support CSS variables in arbitrary values without configuration. The tool flags `var(--…)` references and suggests adding the variable to your tailwind.config.js or using arbitrary values like `bg-[var(--my-color)]`.
Does it support pseudo-classes beyond hover/focus?: Yes — `:active`, `:disabled`, `:checked`, `:first-child`, `:last-child`, `:hover`, `:focus`, `:focus-visible`, `:focus-within` all map to their Tailwind equivalents (`active:`, `disabled:`, `checked:`, `first:`, `last:`, etc.). Less common pseudo-classes may not have a Tailwind utility.

Learn more

Explore more developer utilities tools

100% in-browserNo downloadsNo sign-upMalware-freeHow we keep this safe →