Tailwind Class to CSS Converter

About this tool

The Tailwind Class to CSS Converter looks up the CSS declarations behind common Tailwind CSS utility classes. Type or paste space-separated classes and the tool combines the declarations of every class it knows into a single .element { … } rule that you can copy with Copy CSS. Its built-in table covers about 250 base utilities from the default theme: spacing (p, px, py, m, mx, my, mt, mb and gap at common steps), display, flexbox and grid basics, font sizes and weights, text alignment and transforms, line height, letter spacing, gray/black/white text and background colors, border width and radius, widths, heights, max-widths, position and inset, z-index, overflow, opacity, shadows, transitions and a few helpers such as truncate and sr-only. Responsive and state variants (md:, hover:, dark:), arbitrary values like w-[42px], other color palettes and custom theme values are not converted; they are listed under 'Not found in lookup'. Shadow values are simplified and differ from Tailwind's own. Everything runs in your browser.

Why use it

• Shows the CSS declarations for common Tailwind utilities without opening the docs.

• Combines several classes into one rule, handy when moving a component to plain CSS.

• Lists unrecognised classes separately, so you know exactly what still needs manual conversion.

• Helps developers new to Tailwind see what spacing and type utilities actually set.

How to use

1. Type Tailwind class names into the input, separated by spaces (e.g. 'flex items-center gap-4 p-4').
2. Read the combined declarations in the CSS output panel, written as a single .element { … } rule.
3. Check the 'Not found in lookup' note for any class the table does not cover, such as hover:, md: or bracket values.
4. Click Copy CSS to copy the rule for pasting into a stylesheet.

When it helps

• Learning what CSS property a common Tailwind class applies as you ramp up on the framework.
• Converting the base utilities of a simple component to vanilla CSS.
• Debugging layout issues by checking the CSS a spacing, flex or sizing utility sets.
• Documenting a component library with the underlying CSS for its common utilities.

Examples

p-4

.element {
  padding:1rem;
}

flex items-center gap-4 p-4 rounded-lg shadow

.element {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem;
  border-radius:0.5rem;
  box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
}

mx-auto max-w-2xl px-4

.element {
  margin-left:auto;
  margin-right:auto;
  max-width:42rem;
  padding-left:1rem;
  padding-right:1rem;
}

hover:bg-blue-500

Not found in lookup: hover:bg-blue-500 — these may be dynamic/responsive variants.

Tips

• Strip variant prefixes before looking a class up: for md:p-4 look up p-4 and wrap it in @media (min-width: 768px) yourself.
• Arbitrary values should be the exception, not the rule. If you find yourself writing w-[173px], add a value to your tailwind.config.js theme instead.
• Tailwind's spacing scale uses rem (1 = 0.25rem). p-4 = padding: 1rem; not padding: 4px.
• Color utilities use the Tailwind palette ('blue-500', 'gray-900'). Match them against your design tokens before swapping.
• If two classes set the same property (e.g. p-4 and px-2), both declarations appear in typing order; the later one wins in plain CSS just as the more specific utility would in Tailwind only if you keep that order.
• Compare shadow output against Tailwind's documentation before shipping; this tool's shadow values are simplified.

Frequently Asked Questions

Glossary

Utility class

A small, single-purpose CSS class (e.g. .p-4, .text-center) that applies one or a few CSS properties. Tailwind's core philosophy.

Responsive prefix

Tailwind variant (sm:, md:, lg:, xl:, 2xl:) that scopes a utility to a min-width media query. sm:p-4 = padding: 1rem above 640px.

State variant

Tailwind variant (hover:, focus:, dark:, disabled:, group-hover:) that scopes a utility to a CSS pseudo-class or state context.

Arbitrary value

Square-bracket syntax (w-[173px], bg-[#1a73e8]) that lets you use any value not in the theme. Generated by Tailwind's JIT engine.

JIT (Just-In-Time)

Tailwind's on-demand compilation engine. Generates only the utility classes used in your source files, enabling arbitrary values and tiny bundle sizes.

Theme

The configuration object in tailwind.config.js that defines spacing scale, color palette, breakpoints, and other design tokens.

@apply

Tailwind directive used inside your own CSS to compose a custom class from existing utilities. Resolves at build time.

group / peer

Tailwind's mechanism for sibling- or parent-state styling. group-hover:opacity-100 styles a child when its parent .group is hovered.