CSSApril 2026 · 5 min read

How to Convert Tailwind CSS Classes to Regular CSS

Tailwind CSS uses utility classes like 'flex items-center gap-4 p-6 rounded-lg bg-white shadow-md' instead of writing custom CSS. But sometimes you need the equivalent standard CSS — for email templates that can't use Tailwind, for understanding what a class does, or for extracting styles from a Tailwind project.

🔄

Try the Tailwind to CSS

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01Common Tailwind to CSS Conversions02Responsive and State Classes03Using the Converter Tool04When to Convert Tailwind to CSS

⚡ Key Takeaways

Convert Tailwind utility classes to standard CSS properties.
Covers common tailwind to css conversions.
Covers responsive and state classes.
Covers using the converter tool.
When to Convert Tailwind to CSS.

Common Tailwind to CSS Conversions

Layout: flex → display: flex. grid → display: grid. items-center → align-items: center. justify-between → justify-content: space-between. gap-4 → gap: 1rem.

Spacing: p-4 → padding: 1rem. m-2 → margin: 0.5rem. px-6 → padding-left: 1.5rem; padding-right: 1.5rem. mt-8 → margin-top: 2rem.

Sizing: w-full → width: 100%. h-screen → height: 100vh. max-w-lg → max-width: 32rem.

Tailwind's spacing scale is based on 0.25rem increments: 1 = 0.25rem, 2 = 0.5rem, 4 = 1rem, 8 = 2rem.

Responsive and State Classes

Tailwind prefixes handle responsive breakpoints and states: md:flex → @media (min-width: 768px) { display: flex; }. hover:bg-blue-600 → :hover { background-color: #2563eb; }. dark:bg-gray-900 → @media (prefers-color-scheme: dark) { background-color: #111827; }. The Tailwind to CSS tool converts all of these prefixed classes to their standard CSS equivalents.

💡 Tip

CSS Grid auto-fill and auto-fit behave differently when there are fewer items than columns. Use auto-fill to keep empty tracks; auto-fit to collapse them.

Using the Converter Tool

Paste any Tailwind class string into the Tailwind to CSS tool and get the equivalent CSS properties instantly. This is useful for learning what unfamiliar classes do, converting Tailwind prototypes to vanilla CSS, and building email templates where only inline CSS works.

⚠ Warning

Avoid animating width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.

When to Convert Tailwind to CSS

Email templates (most email clients don't support external stylesheets or utility classes). Third-party widget embeds where you can't include Tailwind's stylesheet. Documentation where you need to show standard CSS. Migrating away from Tailwind to a custom CSS architecture. Understanding a colleague's Tailwind code when you're more comfortable with standard CSS.

Frequently Asked Questions

How do I convert Tailwind classes to CSS?+

Paste the Tailwind class string into the Tailwind to CSS tool for instant conversion. Each utility class maps to one or more standard CSS properties — for example, p-4 becomes padding: 1rem.

What does p-4 mean in Tailwind?+

p-4 sets padding: 1rem (16px) on all sides. Tailwind's spacing scale uses 0.25rem increments, so the number 4 means 4 × 0.25rem = 1rem.

Can I use Tailwind classes in email templates?+

No — email clients don't support Tailwind's utility approach. Convert Tailwind classes to inline CSS using the Tailwind to CSS tool, then apply the styles inline in your email HTML.

Try it yourself

Use the Tailwind to CSS — free, no signup required.

⚡ Open Tailwind to CSS

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading

⚡ Try the free Tailwind Class Sorter →