Does this send my class list anywhere?

No. Conversion runs entirely in your browser using a lookup table shared with the CSS to Tailwind Converter.

What happens to a class it doesn't recognize?

It's flagged in a trailing comment listing every unrecognized class, rather than being silently dropped from the output.

Does it understand variants like hover: or sm:?

No. It converts the base utility name; a class written as hover:bg-blue-500 or sm:flex won't match a base mapping and will be flagged as unrecognized.

Can arbitrary-value classes like p-[13px] be converted back?

Yes. Tailwind's arbitrary-value syntax (prefix-[value]) and arbitrary-property syntax ([property:value]) both convert back to a plain CSS declaration using the matching property.

Tailwind to CSS Converter - Tailwind Classes to CSS Online

Overview

Introduction

Reading a long Tailwind class list on an unfamiliar element is slower than reading the plain CSS it represents, especially when reviewing someone else's markup.

This tool converts a space-separated list of Tailwind utility classes back into plain CSS declarations directly in your browser.

What Is Tailwind to CSS Converter?

The inverse of the CSS to Tailwind Converter, built on the same shared mapping table so both tools stay in sync.

It parses class names for a known prefix and scale value (or a keyword mapping), and falls back to reading Tailwind's arbitrary-value/arbitrary-property syntax directly when present.

How Tailwind to CSS Converter Works

Each class in the input is looked up against the shared mapping table's reverse lookups (layout keywords, spacing/font-size/radius scales, and a small named-color table) to recover its property and value.

A class that doesn't match anything in the table, including any variant-prefixed class like hover:underline, is left out of the CSS block and listed by name in a trailing comment instead of being silently ignored.

When To Use Tailwind to CSS Converter

Use it when reviewing markup that leans on utility classes and you want to see the resulting CSS at a glance.

It's also useful when extracting a component's inline utility styling into a real CSS rule for a design system or style guide.

Often used alongside CSS to Tailwind Converter, CSS Variable Extractor and CSS Formatter.

Features

Advantages

Runs entirely client-side.
Flags unrecognized classes explicitly instead of dropping them, so nothing goes missing silently.
Understands Tailwind's arbitrary-value and arbitrary-property syntax, not just named utilities.

Limitations

Variant-prefixed classes (hover:, sm:, dark:, and similar) aren't understood; only the base utility name is looked up, so a variant class is reported as unrecognized.
Only a small set of named colors round-trips to a CSS color keyword; classes outside that set that aren't arbitrary-value syntax won't resolve to a value.
If the same CSS property appears more than once (e.g. both p-4 and px-2), only the first mapped declaration for that property is kept in the output.

Examples

Layout utilities

Input

flex items-center justify-center p-4

Output

{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

Each utility class maps back to its plain CSS declaration using the shared mapping table.

An unrecognized variant class

Input

flex hover:bg-blue-500

Output

{
  display: flex;
}

/* Unrecognized classes (no mapping found): hover:bg-blue-500 */

flex converts normally; the variant-prefixed class has no base mapping, so it's flagged instead of silently dropped.

Best Practices & Notes

Best Practices

Strip variant prefixes (hover:, sm:, dark:) before converting if you specifically want that state's declarations, since this tool only reads the base utility.
Check the unrecognized-classes comment before assuming the output is complete.
Run the CSS Formatter on the result if you're pasting it into a larger stylesheet and want consistent formatting.

Developer Notes

Reuses the same tailwind-css-mapping module as the CSS to Tailwind Converter, reading its reverse lookup tables plus Tailwind's arbitrary-value ([prefix-[value]) and arbitrary-property ([property:value]) syntax directly.

Tailwind to CSS Converter Use Cases

Reading the plain CSS behind a utility-heavy class list during code review
Extracting a one-off utility-styled element into a named CSS class for reuse
Checking what a specific Tailwind class actually resolves to on the default theme

Common Mistakes

Pasting classes with variant prefixes and expecting their conditional styling to appear; only the base utility is converted.
Assuming a custom Tailwind theme's color/spacing scale is honored; this tool only knows Tailwind's default scale.

Tips

If several classes report as unrecognized, check whether they're custom utility classes from your own config rather than Tailwind defaults.
Run the CSS to Tailwind Converter on the output to confirm you get back a class list close to the original.

Tailwind to CSS Converter