CSS to Tailwind converter

How to use the CSS to Tailwind converter

  1. Paste any CSS block — a full stylesheet, a single rule, or a fragment from browser DevTools.
  2. The converter parses each selector and property and outputs the closest Tailwind utility classes.
  3. Properties with no matching Tailwind preset are emitted as arbitrary values ([width:317px]) — review these because they usually mean your CSS uses values that should be added to your Tailwind theme instead.
  4. Switch Tailwind version between v3 and v4 — the v4 output uses the new @theme config and native CSS variables.
  5. Copy the class list straight into your JSX or HTML.

When to use it

Bulk-converting a legacy stylesheet saves hours, but the output needs review. Use the converter to handle boilerplate (spacing, colors, font sizes) and then refactor the fragments that slipped through — custom animations, complex pseudo-classes, and print media queries. Don't use it for one-off rules that are cleaner in CSS; Tailwind shines in component-scoped utility chains, not in replacing every stylesheet. Alternative: transform.tools offers CSS-to-Tailwind conversion but stopped at Tailwind v2.

Example

Input:

.card { padding: 1rem; border-radius: 0.5rem; box-shadow: 0 4px 6px rgb(0 0 0 / 0.1); }

Output: `p-4 rounded-lg shadow-md`

Frequently asked questions

Does it handle media queries?
Yes. @media (min-width: 768px) becomes the md: prefix on every rule inside.
What about hover and focus states?
Pseudo-classes become Tailwind variants: :hover → hover:, :focus → focus:, :disabled → disabled:.
Will the output use Tailwind's default palette or arbitrary hex?
The converter maps common CSS values to Tailwind presets where an exact match exists (#ef4444 → red-500). Values without a match become arbitrary (text-[#ff1493]).
What if a CSS property has no Tailwind equivalent?
It's emitted as an arbitrary utility using square brackets. For frequent use, extend your tailwind.config.js theme rather than leaving arbitrary values in every component.
Does it work with Tailwind v4?
Yes — toggle v4 output to emit @theme config and use the new CSS-variable-based utilities.

Related tools

Last updated: 2026-04-22