Don't like ads? Go Ad-Free Today 

Tailwind CSS Classes to Plain CSS Converter

DeveloperText

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

OUTPUT

Client Side

ADVERTISEMENT · REMOVE?

Guide

Tailwind CSS Classes to Plain CSS Converter

Paste a string of Tailwind v3 utility classes and instantly get the equivalent plain CSS rule. Each Tailwind class is expanded to its exact CSS declaration with the correct rem, px, and color values from the official design tokens — no guessing, no rounding.

Useful when migrating a Tailwind component to vanilla CSS, when you want to inspect the underlying declarations, or when you need to ship hand-written CSS without the Tailwind build step.

How to Use

Paste your Tailwind class string into the input box (e.g. flex items-center gap-4 p-6 bg-blue-500).
Optionally change the selector — the default is .element.
Read the generated CSS in the output panel. Responsive variants (md:, lg:…) are wrapped in matching @media queries; state variants (hover:, focus:…) emit their own selectors.
Copy the result or download it as a .css file.

Features

Full spacing scale – Every Tailwind margin, padding, gap, width, and height value resolves to the canonical rem or px output.
Complete color palette – All 22 color families with shades 50–950 map to their exact hex codes for text, background, border, fill, and stroke.
Responsive variants – sm:, md:, lg:, xl:, and 2xl: are emitted as proper @media (min-width: ...) blocks.
State variants – hover:, focus:, active:, disabled:, group-hover:, peer-focus:, dark:, before:, after: and more become real CSS selectors or media queries.
Arbitrary values – Square-bracket syntax like w-[37rem] or bg-[#abc123] passes through to the corresponding declaration.
Negative utilities – Leading-dash forms such as -mt-4 produce the correct negative rem values.
Custom selector – Choose any selector to wrap the output rule (.card, #hero, etc.).
Copy and download – One click to copy the CSS or save it as a file.

ADVERTISEMENT · REMOVE?

 FAQ

What is the difference between utility-first CSS and component-based CSS?

Utility-first CSS provides single-purpose classes (e.g., flex, p-4, text-center) that each map to one CSS declaration, so styling happens directly in markup. Component-based CSS groups many declarations under semantic class names (e.g., .card, .button) that describe the element rather than its visuals. Utility-first trades larger HTML for predictable, reusable atoms; component-based trades larger stylesheets for higher-level abstractions.
How does the Tailwind spacing scale relate to rem units?

Tailwind's default spacing scale is a multiplier on a 0.25rem base, where 1rem equals 16px on a default browser. So p-4 resolves to padding: 1rem (16px), p-2 is 0.5rem (8px), and p-6 is 1.5rem (24px). The exceptions are spacing-0 (0px) and spacing-px (1px), which bypass the rem unit so you can place pixel-perfect borders or hairline gaps without arithmetic.
Why do responsive utility frameworks use min-width media queries by default?

Mobile-first frameworks like Tailwind use min-width queries so base styles target the smallest viewport and progressively enhance for larger screens. This matches how mobile browsers render before they know the final layout, avoids flash-of-wrong-style on slow connections, and lets each breakpoint override only what changes — keeping the cascade additive instead of subtractive.