Developer Tools

CSS to Tailwind Converter

CSS to Tailwind Converter is part of Toolspire and is ready as soon as this page loads. 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 this tab.

Runs in this tabFreeNo account

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.

On this page

What you can do here

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.

The sequence

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.

Worth knowing

CSS to Tailwind Converter on Toolspire: 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 this tab — your CSS isn’t uploaded.

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

Questions about CSS to Tailwind Converter

Where does CSS to Tailwind Converter run?

CSS to Tailwind Converter runs in this tab on Toolspire. What you type or drop in is not sent to us and is not stored on a server.

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 this tab.

Keep going

CSS Flexbox & Grid PlaygroundNewCSS Flexbox & Grid Playground on Toolspire: Learn and build CSS flexbox and grid layouts visually: try every property, watch items move, draw grid areas.CSS Tools CSS Box Shadow GeneratorNewCSS box-shadow generator: build smooth layered shadows, edit each layer, start from Tailwind or Material presets, and copy CSS, Tailwind or React.CSS Tools Bento Grid GeneratorNewBento Grid Generator on Toolspire: Draw tiles with the mouse, preview desktop, tablet and phone, and copy responsive CSS Grid, Tailwind or React code.CSS Tools CSS Glassmorphism GeneratorNewCSS Glassmorphism Generator on Toolspire: Glassmorphism generator: design frosted glass with blur, tint, border and grain, check text contrast live.CSS Tools Scroll Animation GeneratorNewFade, slide, zoom and reveal effects with CSS scroll-driven animations, parallax and progress bars, plus a Firefox fallback.CSS Tools JSON Formatter & ValidatorNewJSON Formatter & Validator on Toolspire: Format, validate, minify and repair JSON online. Get the exact line and column of every error.Developer Tools

Open the full directory

Last updated 5 October 2026Report a problem or suggest a feature