CSS to Tailwind Converter
About this tool
Free CSS to TailwindCSS converter that turns any CSS block into clean Tailwind v3 or v4 utility classes — instantly, in your browser, with no signup. Paste raw CSS, inline-style declarations, or CSS-in-JS template-literal contents and the converter auto-applies variant prefixes for you: :hover → hover:, :focus → focus:, :active → active:, @media (min-width: 768px) → md:, @media (prefers-color-scheme: dark) → dark:, !important → ! prefix. Arbitrary-value fallbacks like p-[14px] and text-[#ff6c8a] cover anything outside Tailwind's default scale, and a live preview iframe renders the converted classes on a sample element using the official Tailwind v3 or v4 CDN so you can verify visually before shipping. Works offline (preview optional), 100% client-side, no signup, no upload.
Why use Tailwind CSS?
How to use this converter
Common CSS → Tailwind mappings
Mappings target Tailwind v3 syntax (default scale: 1 unit = 4px). v4 changed some defaults (renamed colors, CSS-native @theme config) — most utility names are unchanged, but if you use v4, verify renamed utilities against the v4 docs.
| CSS property | Tailwind class |
|---|---|
display: flex | flex |
flex-direction: column | flex-col |
align-items: center | items-center |
justify-content: between | justify-between |
padding: 16px | p-4 |
margin-top: 8px | mt-2 |
font-size: 14px | text-sm |
font-weight: 600 | font-semibold |
color: #fff | text-white |
background-color: #000 | bg-black |
border-radius: 8px | rounded-lg |
box-shadow: ... | shadow-md |
Conversion patterns
.btn {
@apply flex items-center gap-2 px-4 py-2
rounded-lg bg-violet-600 text-white
font-semibold text-sm hover:bg-violet-700;
} /* CSS */
.hero { width: 720px; font-size: 13px; }
/* Tailwind */
<div class="w-[720px] text-[13px]"> /* CSS */
@media (min-width: 768px) {
.card { flex-direction: row; }
}
/* Tailwind */
<div class="flex-col md:flex-row"> Pro tips
How this converter compares
Feature-by-feature comparison against the three top-ranked CSS-to-Tailwind converters on Google. Checked manually against each tool's live version on 2026-06-12.
| Feature | CodeFronts | transform.tools | js2ts.com | divmagic.com |
|---|---|---|---|---|
| Pseudo-classes auto-prefixed (hover:, focus:) | ✓ | — | ~ | ? |
| @media → sm:/md:/lg: auto-prefixed | ✓ | — | ✓ | ? |
| Tailwind v3 / v4 toggle (with rename map) | ✓ | ~ | — | — |
| Live preview iframe | ✓ | — | — | — |
| !important → ! prefix auto-detected | ✓ | — | — | — |
| Arbitrary value fallback for any property | ✓ | ~ | ✓ | ? |
| Client-side (no upload, works offline) | ✓ | — | — | ✓ |
| No signup / no upload | ✓ | ✓ | ✓ | ✓ |
| CSS variable handling (skip --vars cleanly) | ✓ | — | ? | ? |
| Dark / reduced-motion media variants | ✓ | — | — | ? |
✓ = full support, ~ = partial (works for common cases, breaks on edges), — = not supported, ? = not documented on the competitor's site (we won't guess). Competitor results reflect their published docs on 2026-06-12 — feature parity may close over time.
Edge cases & how they're handled
Not all CSS converts cleanly to utilities. Here's what happens with the cases the converter can't resolve directly.
Frequently asked questions
Does this CSS to Tailwind converter support Tailwind v3 and v4?
Yes — there's a v3 / v4 toggle above the input. v3 mode emits classic Tailwind v3.4 names. v4 mode applies the official v4 rename map so the output drops straight into a Tailwind 4 project: <code>shadow-sm</code> → <code>shadow-xs</code>, <code>shadow</code> → <code>shadow-sm</code>, <code>rounded</code> → <code>rounded-sm</code>, <code>rounded-sm</code> → <code>rounded-xs</code>, <code>blur</code> → <code>blur-sm</code>, <code>outline-none</code> → <code>outline-hidden</code>. Arbitrary-value syntax (<code>px-[14px]</code>, <code>text-[#ff6c8a]</code>) is identical across both versions. The live preview iframe loads the matching CDN build so you see the actual v3 or v4 rendering of your converted classes.
What happens when a CSS property has no Tailwind equivalent?
Three layers of fallback. <strong>1.</strong> If the property has a Tailwind utility but the value isn't on the default scale (e.g. `padding: 14px` — Tailwind ships `p-3.5` = 14px, but if your value is `13px` it'd miss), the converter emits an arbitrary value like `p-[13px]`. <strong>2.</strong> If the property itself has no Tailwind utility (e.g. `mask-image`, `scrollbar-color`), it emits a full arbitrary class `[mask-image:url(...)]`. <strong>3.</strong> For anything truly unmappable, the unknown counter in the stats footer flags it — use Tailwind's `@apply` directive in your stylesheet to handle those one-off declarations. The converter never silently drops a declaration.
Does the converter handle :hover, :focus, and @media queries automatically?
Yes — variant prefixes are applied automatically. Pseudo-class selectors map to their Tailwind variants: <code>:hover</code> → <code>hover:</code>, <code>:focus</code> → <code>focus:</code>, <code>:active</code> → <code>active:</code>, <code>:disabled</code> → <code>disabled:</code>, <code>:checked</code> → <code>checked:</code>, <code>:focus-visible</code> → <code>focus-visible:</code>, <code>:first-child</code> → <code>first:</code>, <code>:last-child</code> → <code>last:</code>. <code>@media (min-width: 768px)</code> auto-snaps to the matching breakpoint (<code>sm:</code> 640, <code>md:</code> 768, <code>lg:</code> 1024, <code>xl:</code> 1280, <code>2xl:</code> 1536); any non-standard width emits an arbitrary variant like <code>min-[900px]:</code>. <code>@media (prefers-color-scheme: dark)</code> maps to <code>dark:</code>, <code>prefers-reduced-motion: reduce</code> maps to <code>motion-reduce:</code>, and <code>@media print</code> maps to <code>print:</code>. Compound selectors (<code>.btn:hover:focus-visible</code>) stack the variants in order.
Can I convert SASS, SCSS, or LESS to Tailwind?
Compile to plain CSS first — the converter expects standard CSS syntax. Variables and nesting must be flattened: run your SASS through the official compiler (or VS Code's `sass --watch`), then paste the resulting CSS into this tool. The same applies to PostCSS plugins, CSS Modules' typed CSS, or anything that uses non-standard syntax — only valid CSS goes in.
Does the tool send my CSS to a server?
No. Conversion runs entirely in your browser. There is no upload, no server request, no analytics on the contents of what you paste, and no telemetry. The mapping table and parser run as a JavaScript module that loads with the page; once loaded, the tool works offline. This matters when you paste design-system CSS, client work, or anything proprietary — none of it leaves your device.
How do I convert inline `style="..."` attributes to Tailwind?
Copy just the declarations from inside the quotes (e.g. <code>color: red; padding: 8px; display: flex;</code>) into the input pane. The CSS-to-Tailwind converter doesn't require a wrapping selector — bare declarations parse fine. Output is a single space-separated class string you can drop into the corresponding `class=` attribute, removing the inline `style=` entirely.
What about CSS properties with `!important`?
Auto-detected. The converter strips <code>!important</code> from the value and re-applies it as Tailwind's <code>!</code> important prefix on the generated utility. So <code>color: red !important</code> becomes <code>!text-red-500</code>, and <code>padding: 14px !important</code> becomes <code>!p-[14px]</code>. The <code>!</code> prefix is supported in Tailwind v3.2+ and v4, so the output works on either version. Combined with variant prefixes, <code>:hover { color: red !important }</code> becomes <code>hover:!text-red-500</code>.
How does the live Tailwind preview work?
Below the output panel, a sandboxed iframe loads the official Tailwind CDN (v3.4 or v4 to match the version toggle) and renders your converted utility classes on a sample element — a <code><button></code> if the selector mentions <em>btn</em> or <em>button</em>, otherwise a <code><div></code>. This lets you verify the actual visual result of your conversion before pasting into your project, especially useful for catching arbitrary-value fallbacks that don't match what you intended. The iframe is fully sandboxed (<code>allow-scripts</code> only — no same-origin access), so nothing leaks between the preview and the page. You can toggle the preview pane off with the Hide Preview button if you don't want the CDN request.
What's the difference between CSS-in-JS and standard CSS for this converter?
CSS-in-JS (styled-components, Emotion) usually uses standard CSS syntax inside template literals — just paste the contents of the template literal (without the backticks) and it converts cleanly. The exception is camelCase object syntax (React inline styles, `{ backgroundColor: 'red' }`) which is JavaScript, not CSS — convert those keys to kebab-case first (`background-color: red`). For Emotion/styled-components with interpolated variables (`${props => props.color}`), replace the interpolation with a concrete value before converting.
Why convert CSS to Tailwind instead of using `@apply`?
Both are valid — pick by use case. <code>@apply</code> is great when you have a complex pattern repeated across many elements (a custom button variant, a card layout) and want to keep your HTML clean. Inline Tailwind classes are better for unique one-offs and when you want every styling decision visible at the markup level. This converter is most useful when you're <strong>migrating an existing CSS file</strong> to a Tailwind project — get the mapping done in minutes, decide per-component whether to inline the classes or wrap them in `@apply`.
See it used in real designs
Browse hand-coded collections that put this tool to work.
