Tailwind to CSS Converter

Convert Tailwind utility classes to equivalent CSS — supports spacing, typography, flexbox, colors, and more.

Input Classes: 22Recognized: 22Unrecognized: 0Output Rules: 26CSS Size: 1015 chars

Presets & Samples

Tailwind classes

CSS Output

.element { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; margin-left: auto; margin-right: auto; max-width: 64rem; background-color: #ffffff; /* [dark] */ background-color: var(--color-gray-900, oklch(from var(--tw-gray-900) l c h)); color: var(--color-gray-900, oklch(from var(--tw-gray-900) l c h)); /* [dark] */ color: var(--color-gray-100, oklch(from var(--tw-gray-100) l c h)); border-radius: 12px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); border-width: 1px; border-color: var(--color-gray-200, oklch(from var(--tw-gray-200) l c h)); /* [hover] */ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4,0,0.2,1); transition-duration: 150ms; transition-duration: 300ms; font-size: 14px; line-height: 20px; font-weight: 500; line-height: 1.625; }

About Tailwind to CSS conversion

Tailwind utility classes map almost 1-to-1 to CSS properties. This converter handles spacing (padding, margin, gap, width, height), typography (font-size, font-weight, line-height, letter-spacing), display and flex layout, borders, shadows, transitions, opacity, z-index, and color utilities using Tailwind's default scale. Variants (hover:, dark:, sm:, etc.) are shown as comments — they require CSS selectors or media queries to implement.

For the reverse conversion see CSS to Tailwind. To validate your CSS output see CSS Minifier and CSS Formatter.

Built and maintained by Meet Shah · Last updated 19 July 2026

What this tool is used for

Understanding what a utility class actually declares.
Migrating a component from utilities back to plain CSS.
Checking which properties a shorthand utility sets.
Explaining a utility's effect to someone unfamiliar with the framework.
Auditing a class list for conflicting utilities.

Frequently Asked Questions

What does it translate?: Spacing, sizing, typography, display and flex layout, borders, shadows, colours and transitions — the utilities that make up the bulk of real markup, resolved to the CSS declarations they generate.
How does the spacing scale map to pixels?: Each unit is 0.25rem, so `p-4` is 1rem and at the default root size that is 16px. Working in rem rather than px is what makes the whole scale respond to a user's font-size preference.
What happens to variant prefixes?: A variant such as `hover:` or `md:` is annotated in the output so you can see which condition the declaration belongs to. It cannot be expressed as a bare declaration — it needs the matching pseudo-class or media query around it.
Are arbitrary values supported?: Bracket values such as `w-[37px]` pass their content straight through, since that is precisely what the notation means. A custom class from your own config is not resolvable here, because its definition lives in your project.
Why does my project's output differ?: Because a Tailwind config can change the spacing scale, the palette, the breakpoints and the font sizes. This converter uses the framework defaults, so a customised project will match on structure but may differ on exact values.
Is this useful for leaving Tailwind?: As a first pass. It shows what each utility means, which is the hard part of extracting a component into plain CSS. What it cannot do is decide which declarations belong together as a reusable class — that is design work.

Common errors and gotchas

Assuming a utility maps to one property, when several set more than one.
Overlooking that a utility's value depends on the project's own theme configuration.
Expecting responsive and state prefixes to convert into plain declarations, which need media queries and selectors.
Losing the preflight base styles that the framework applies underneath.
Assuming the version matters little, when the scale and defaults have changed between majors.