CSS to Tailwind Converter

Paste CSS and get Tailwind classes for each selector — exact scale values where they exist, arbitrary values where they don’t, and every approximation flagged. Converts as you type, in your browser.

Runs in your browser Free · no sign-up Works on any device

Nearest coloursUse the closest Tailwind colour when there’s no exact one.Prefix

CSS

Tailwind classes

Paste CSS on the left — a rule, a whole stylesheet or just a few declarations. Try the Sample to see hover states, breakpoints and dark mode converted.

Converted in your browser as you type.p-4 exactp-[13px] arbitrary valueease-in-out close, not identicalHover a class to see the CSS it came from.

At a glance

Outputs Tailwind v4 classes by default, or v3 — scales, colour names and syntax differ (for example p-3.25 and shadow-sm in v4 vs p-[13px] and shadow in v3).
:hover, :focus, ::before, :first-child, [aria-expanded="true"], @media (min-width: 768px), dark mode and @supports become variants like hover:, before:, first:, aria-expanded:, md:, dark: and supports-[…]:.
.card:hover .title becomes group-hover: (adding group to .card) and input:checked + label becomes peer-checked:.
Colours in hex, rgb(), hsl() or OKLCH are matched to the Tailwind palette (v3 hex and v4 colours), with opacity like bg-black/50; an option picks the nearest palette colour.
Shorthands are merged into Tailwind shortcuts: px-4, truncate, size-10, line-clamp-3, gradients as bg-linear-to-r from-… to-….
Anything without an exact class becomes an arbitrary value (p-[13px], [-webkit-text-stroke:1px]), highlighted so you can review it; close-but-not-identical matches are marked.
The converter is tested against the real Tailwind v4 compiler, so the classes it writes exist. Runs in your browser — your CSS isn’t uploaded.

Step by step

How to convert CSS to Tailwind

1
Paste your CSS
Paste a rule, a whole stylesheet or a few declarations into the CSS box — or try the Sample.
2
Choose the version
Pick Tailwind v4 or v3, and set a prefix or nearest-colour matching if you need them.
3
Review
Classes appear for each selector. Amber classes are arbitrary values; underlined ones are close, not identical.
4
Copy
Copy the classes, a class attribute or a JSX className and paste them into your HTML or components.

Features

Everything you need, nothing you don’t

Whole stylesheets

Paste rules, media queries and nested CSS together — classes are grouped by element, with each breakpoint and state in one class list.

Exact, not guessed

13px stays 13px. Values are only replaced by a Tailwind step when it is exactly the same; otherwise you get an arbitrary value.

Honest approximations

Where Tailwind is close but different — like CSS “ease” vs ease-in-out — the class is marked and the difference explained.

Palette matching

Recognises Tailwind colours from design files, including v4’s OKLCH values, and keeps opacity as /50 modifiers.

See where it came from

Hover a class, or open “How each class was made”, to see the CSS declaration behind it.

Ready to paste

Copy the classes, a class="" attribute or a JSX className for each selector, with your project’s prefix if it uses one.

Examples

CSS	Tailwind v4
`display: flex; align-items: center; gap: 8px`	`flex items-center gap-2`
`padding: 12px 24px`	`py-3 px-6`
`margin: 0 auto; max-width: 768px`	`my-0 mx-auto max-w-3xl`
`color: #1e293b; background: rgba(0,0,0,.5)`	`text-slate-800 bg-black/50`
`border: 1px solid #e5e7eb; border-radius: 8px`	`border border-gray-200 rounded-lg`
`overflow: hidden; text-overflow: ellipsis; white-space: nowrap`	`truncate`
`.btn:hover { background: #1d4ed8 }`	`hover:bg-blue-700`
`@media (min-width: 768px) { .a { padding: 32px } }`	`md:p-8`
`padding: 13px`	`p-3.25` (v4) · `p-[13px]` (v3)

Tips

Keep @keyframes and @font-face in your CSS (or in your Tailwind theme) — the converter lists them as skipped and you can use animate-[…] and font-[…] to refer to them.

In Tailwind v4, dark: follows the system setting unless you set up class-based dark mode. Tailwind’s preflight already makes borders solid, so border-solid is left out.

FAQ

Frequently asked questions

How do I convert CSS to Tailwind?

Paste your CSS into the box. The tool shows the Tailwind classes for each selector straight away, including hover states and breakpoints — copy them into your HTML.

Does it support Tailwind v4?

Yes — v4 is the default. Switch to v3 for older projects; the classes follow each version’s scales and syntax (v4 p-4! vs v3 !p-4 for important, for example).

Why are some classes like p-[13px]?

They are arbitrary values: Tailwind has no class for exactly that value (in v3) or it’s not on any scale. They work as-is; you can also switch them to the nearest scale value by hand.

Will hex colours become Tailwind colour names?

When they match a Tailwind palette colour exactly — v3 hex values and v4’s colours both count — yes, e.g. #1e293b → slate-800. Turn on Nearest colours to use the closest palette colour for the rest.

Does it convert media queries and :hover?

Yes. Min-width queries at 640, 768, 1024, 1280 and 1536px become sm:, md:, lg:, xl: and 2xl:; others become min-[…]: or max-[…]:. :hover, :focus, ::before, :first-child, dark mode and more become variants.

Is my CSS uploaded?

No. The conversion runs entirely in your browser.

Keep going

New

JSON Formatter & Validator

Format, validate, minify and repair JSON online. Get the exact line and column of every error, a collapsible tree view and sorted keys — private, in-browser.

Developer ToolsOpen

New

Markdown Live Previewer

Write Markdown with a live preview: GitHub tables, task lists, alerts and highlighted code. Export to HTML or PDF — free, private, runs in your browser.

Developer ToolsOpen

New

Base64 Encoder & Decoder

Encode text or files to Base64 and decode Base64 back — UTF-8, URL-safe Base64URL, data URLs for images, file type detection. Free, private, no upload.

Developer ToolsOpen

New