Tailwind to CSS Converter

Translate your Tailwind utility classes instantly back into raw CSS rules

Safe conversion with no data sent to server

Tailwind Classes to CSS

Input Tailwind Classes

Generated Original CSS

Note: This tool utilizes a heuristic based matching table. Responsive prefixes (sm:, md:), pseudo-classes (hover:, focus:), and complex arbitrary values mapping might be partially supported and fallback gracefully to comments.

What is Tailwind CSS?

Tailwind CSS is an incredibly popular utility-first CSS framework. It provides low-level utility classes like flex, pt-4, and text-center that let you build completely custom designs directly in your HTML markup.

Tailwind CSS vs Regular CSS

While Tailwind helps you write styling rapidly without context-switching, sometimes you need to port your component to an environment that does not support Tailwind, like an older codebase or an email template. This is where converting Tailwind classes back into standard Vanilla display: flex; and padding-top: 1rem; properties is essential.

Common Tailwind Classes and Their Equivalence

For example: bg-blue-500 converts to background-color: var(--color-blue-500);,rounded-lg becomes border-radius: 0.5rem;, andp-4 outputs padding: 1rem;.