Tailwind to CSS Converter
Free tool No sign-up
About this tool
Paste any Tailwind CSS class string and instantly get equivalent plain CSS — supports variants (hover, focus, md), arbitrary values, and four output formats: plain CSS, custom properties, SCSS, and @apply.
Advertisement
Why convert Tailwind to CSS?
Migrate away from Tailwind
Moving a project off Tailwind to plain CSS modules, BEM, or another framework? Convert classes one component at a time without re-deriving values from scratch.
Understand what classes do
Reading a foreign codebase full of Tailwind classes? Paste a class string and see the exact CSS Tailwind generates — pixel values, hex colors, the works.
Extract a one-off component
Pull a Tailwind component into a project that doesn't use Tailwind. Get standalone CSS with proper hover/focus/responsive rules so the component works everywhere.
Learn Tailwind from the inside
New to Tailwind? Convert a known utility string and see exactly what's happening — every shorthand expanded into the full property/value pairs you already understand.
How to use this converter
01
Paste your Tailwind classes
Copy any space-separated Tailwind class string — from a className, an HTML class attribute, or a JSX template — and paste it into the input panel on the left.
02
Pick an output format
Choose Plain CSS, CSS + custom properties (hoists colors into :root variables), SCSS (nested pseudo-classes), or Tailwind @apply (keeps the Tailwind abstraction in a single class).
03
Customize the selector
Type your own selector in the small input — .btn-primary, #hero, [data-state="open"] — and the output uses it instead of the default .element. Saves a find-replace step.
04
Copy and paste
Click Copy to grab the formatted CSS and drop it into your stylesheet. Variants like hover:, md:, focus: come through as proper :hover rules and @media blocks.
Common Tailwind → CSS mappings
| Tailwind class | CSS property |
|---|---|
flex | display: flex |
items-center | align-items: center |
justify-between | justify-content: space-between |
gap-3 | gap: 12px |
p-4 | padding: 16px |
mt-2 | margin-top: 8px |
text-sm | font-size: 14px |
font-semibold | font-weight: 600 |
text-white | color: #ffffff |
bg-violet-600 | background-color: #7c3aed |
rounded-lg | border-radius: 8px |
shadow-md | box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)… |
Conversion patterns
Plain CSS
/* Input */
flex items-center gap-3 px-4 py-2
rounded-lg bg-violet-600 text-white
hover:bg-violet-700
/* Output (Plain CSS) */
.element {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 16px;
border-radius: 8px;
background-color: #7c3aed;
color: #ffffff;
}
.element:hover {
background-color: #6d28d9;
} @apply
/* Input */
flex items-center gap-2 px-4 py-2
rounded-lg bg-violet-600 text-white
font-semibold hover:bg-violet-700
/* Output (@apply) */
.btn-primary {
@apply flex items-center gap-2 px-4 py-2
rounded-lg bg-violet-600 text-white
font-semibold hover:bg-violet-700;
} Responsive
/* Input */
flex-col md:flex-row gap-4
/* Output (Plain CSS) */
.element {
flex-direction: column;
gap: 16px;
}
@media (min-width: 768px) {
.element {
flex-direction: row;
}
} Pro tips
01
Variants become proper selectors
Every hover:, focus:, md:, dark:, etc. variant compiles into the equivalent CSS — :hover, :focus, @media (min-width: 768px), and prefers-color-scheme rules. The converter handles all of these automatically.
02
Arbitrary values pass through
Tailwind's p-[14px] or bg-[#abc123] arbitrary-value classes are converted exactly as written. Unknown classes show up as a /* unknown */ comment so you can spot them.
03
Custom config not detected
The converter uses Tailwind's default theme. If your project customizes colors, spacing, or breakpoints in tailwind.config, replace those values manually after pasting — the structure will be right but the literal values will use defaults.
04
Pick the right output format
Plain CSS for vanilla projects, custom properties when you want runtime theming, SCSS when nesting helps readability, @apply when you want to keep Tailwind's abstraction but consolidate to one class.
Related tools
Advertisement