Does the converter support hover:, focus:, and other pseudo-class variants?

Yes. Pseudo-class variants including hover:, focus:, active:, disabled:, first:, last:, odd:, even:, placeholder:, before:, and after: are all supported with correct CSS selectors.

Why are some of my classes showing as "unrecognized"?

Unrecognized classes may be arbitrary values (e.g. w-[200px]), custom theme extensions, third-party plugin classes, or Tailwind v4 classes. The converter covers standard Tailwind v3 utility classes.

Does the converter support Tailwind v4?

Our converter is based on Tailwind CSS v3 utility class mappings. Tailwind v4 introduced significant changes. Some v4 classes may not be recognized — use the unrecognized classes list to identify any that need manual handling.

What is the difference between the output format options?

Pretty format generates fully formatted CSS rules with selectors. Compact format puts each rule on one line. Declarations only format strips selectors and shows just the CSS properties — useful when copying into an existing rule.

Tailwind to CSS Converter

Expand Tailwind CSS utility classes into plain CSS online for free with our tailwind to css converter. Instantly convert any Tailwind class into its equivalent CSS declarations — supports responsive prefixes, pseudo-class variants, and 500+ utility classes. No signup required.

Paste Tailwind CSS class names (space-separated, or from a className="..." attribute) and click Convert. The tool expands each utility class into its equivalent plain CSS declaration. Supports responsive prefixes (sm:, md:, lg:) and pseudo-class variants (hover:, focus:, active:). All conversion runs locally in your browser.

Output Format

Tailwind Class Names

Supported Input Formats

Space-separated: flex items-center p-4

className attribute: className="flex p-4"

Responsive: md:flex lg:hidden

Pseudo-class: hover:bg-blue-500 focus:ring-2

Why Use Our Tailwind to CSS Converter?

Fast, accurate, and variant-aware Tailwind CSS expansion

Instant Tailwind to CSS Conversion

Our Tailwind to CSS converter expands utility classes into plain CSS declarations in milliseconds. Convert any Tailwind class — including spacing, colors, typography, flexbox, grid, and transforms — instantly in your browser.

Secure Tailwind to CSS Converter Online

All Tailwind to CSS conversion runs entirely in your browser. Your class names and code never leave your device, ensuring complete privacy when you convert Tailwind CSS online.

Tailwind to CSS — No Installation

Use our Tailwind to CSS converter directly in any browser with no downloads, plugins, or account required. Convert Tailwind classes from any device — desktop, tablet, or mobile — for free.

Responsive & Pseudo-Class Variant Support

Our Tailwind to CSS converter handles responsive prefixes (sm:, md:, lg:, xl:) and pseudo-class variants (hover:, focus:, active:, disabled:) — generating the correct @media queries and CSS selectors automatically.

Common Use Cases for Tailwind to CSS Converter

From migration to debugging — Tailwind CSS expansion for every workflow

Migrating from Tailwind to Vanilla CSS

Teams migrating away from Tailwind CSS use our converter to extract the equivalent plain CSS for each utility class. Convert your entire component's class list to CSS declarations and paste them into a stylesheet.

Understanding Tailwind Internals

Developers learning Tailwind CSS use our converter to understand exactly what CSS each utility class generates. See the precise property values behind classes like shadow-lg, rounded-xl, and transition-colors.

Non-Tailwind Project Integration

When integrating Tailwind-designed components into projects that don't use Tailwind, our converter extracts the plain CSS so you can apply the same styles without adding Tailwind as a dependency.

Email Template Development

Email templates require inline CSS or plain stylesheets — Tailwind classes don't work in most email clients. Use our Tailwind to CSS converter to extract the CSS declarations and apply them inline.

Design System Documentation

Design system teams use our Tailwind to CSS converter to document the exact CSS values behind their Tailwind-based design tokens. Generate CSS reference tables for spacing, colors, and typography.

Debugging & Code Review

Developers debugging layout issues use our Tailwind to CSS converter to see the exact CSS properties applied by a class combination. Understand specificity, inheritance, and cascade behavior at a glance.

Understanding Tailwind to CSS Conversion

How Tailwind utility classes map to plain CSS declarations

What is Tailwind to CSS Conversion?

Tailwind to CSS conversion is the process of expanding Tailwind CSS utility class names into their equivalent plain CSS property declarations. Tailwind CSS is a utility-first framework where each class name corresponds to one or more CSS declarations — for example, flex expands to display: flex, and px-4 expands to padding-left: 1rem; padding-right: 1rem. Our Tailwind to CSS converter performs this expansion for 500+ utility classes, covering spacing, colors, typography, flexbox, grid, borders, shadows, transforms, transitions, and more.

How Our Tailwind to CSS Converter Works

Paste Your Class Names: Enter Tailwind utility classes space-separated, on multiple lines, or directly from a className="..." attribute. Our tailwind to css converter automatically strips the attribute syntax.
Instant Browser-Based Conversion: Click Convert to CSS and the expansion runs entirely in your browser. Each class is matched against a comprehensive Tailwind v3 mapping and expanded to its CSS equivalent. Your code never leaves your device.
Copy or Download the CSS: The generated CSS is displayed in your chosen format — pretty-printed CSS rules, compact one-liners, or declarations only. Copy to clipboard or download as a .css file.

What the Tailwind to CSS Converter Supports

Spacing Utilities:All padding (p-, px-, py-, pt-, pr-, pb-, pl-), margin (m-, mx-, my-, mt-, mr-, mb-, ml-), gap, width, height, and inset utilities using Tailwind's full spacing scale (0 through 96).
Color Utilities: Background colors (bg-), text colors (text-), border colors (border-), and ring colors (ring-) for all Tailwind palette colors including slate, gray, red, orange, yellow, green, blue, indigo, purple, and pink.
Responsive & Pseudo Variants: Responsive prefixes (sm:, md:, lg:, xl:, 2xl:) generate wrapped @media queries. Pseudo-class prefixes (hover:, focus:, active:, disabled:, first:, last:, odd:, even:) generate the correct CSS selectors.
Layout & Typography: Flexbox, grid, display, position, overflow, font size, font weight, line height, letter spacing, text alignment, text decoration, and text transform utilities.

Important Notes About the Converter

This tailwind to css converter covers Tailwind CSS v3 standard utility classes. It does not support arbitrary values (e.g. w-[200px]), custom theme extensions, or third-party Tailwind plugins. Unrecognized classes are listed separately so you can handle them manually. For the most accurate results, use the official Tailwind CSS documentation or the Tailwind Play CDN to verify generated styles.

Related Tools

JSON to YAML

Convert JSON to YAML format instantly - Free online JSON to YAML converter

XML to YAML

Convert XML to YAML format for configuration migration - Free online XML to YAML converter

CSV to YAML

Convert CSV spreadsheet data to YAML format - Free online CSV to YAML converter

TSV to YAML

Convert TSV tab-separated data to YAML format - Free online TSV to YAML converter

Frequently Asked Questions About Tailwind to CSS Converter

Common questions about Tailwind CSS expansion and how our converter works

A Tailwind to CSS converter is a tool that expands Tailwind CSS utility class names into their equivalent plain CSS property declarations. For example, flex becomes display: flex, and px-4 becomes padding-left: 1rem; padding-right: 1rem. Our converter supports 500+ Tailwind v3 utility classes with responsive and pseudo-class variants.

Yes. Responsive prefixes (sm:, md:, lg:, xl:, 2xl:) are fully supported. The converter wraps the generated CSS rule in the appropriate @media query — for example, md:flex generates @media (min-width: 768px) { .md\:flex { display: flex; } }.

Yes. Pseudo-class variants including hover:, focus:, focus-within:, focus-visible:, active:, visited:, disabled:, checked:, first:, last:, odd:, even:, placeholder:, before:, and after: are all supported. The converter appends the correct CSS pseudo-class or pseudo-element selector.

Absolutely. All Tailwind to CSS conversion runs entirely in your browser using JavaScript. Your class names and code never leave your device and are never transmitted to any server.

Yes — our Tailwind to CSS converter is 100% free with no signup, no account, no premium tier, and no usage limits. Convert as many Tailwind classes as you need, at no cost.

Unrecognized classes may be arbitrary values (e.g. w-[200px], text-[#ff0000]), custom theme extensions defined in your tailwind.config.js, third-party plugin classes, or classes from Tailwind v4 that differ from v3. The converter covers standard Tailwind v3 utility classes.

Our converter is based on Tailwind CSS v3 utility class mappings. Tailwind v4 introduced significant changes to the class naming system and CSS variable architecture. Some v4 classes may not be recognized — use the "unrecognized classes" list to identify any that need manual handling.

Pretty format generates fully formatted CSS rules with selectors and indented declarations — ideal for stylesheets. Compact format puts each rule on one line — useful for quick reference. Declarations only format strips selectors and shows just the CSS properties — useful when you want to copy declarations into an existing rule.

Yes. You can paste a full className="..." or class="..." attribute and the converter automatically strips the attribute syntax and extracts the class names. This makes it easy to copy a className prop directly from your JSX or HTML without editing it first.