Tailwind to CSS Converter

The Tailwind to CSS Converter translates Tailwind utility classes into the equivalent plain CSS declarations. Paste a string of classes like flex items-center gap-4 px-6 py-3 rounded-lg bg-blue-500 and it returns the standard CSS properties each utility represents, such as display: flex, align-items: center, and gap: 1rem. It is a lookup and expansion tool, not a build step, so it works on any snippet without a Tailwind config or compiler installed.

How to use it

1. Copy the utility classes from your HTML or JSX element, including responsive and state prefixes if present.
2. Paste them into the input field, separated by spaces exactly as they appear in a class attribute.
3. Read the generated CSS output, which lists each property and value the utilities expand to.
4. Copy the result into a stylesheet or component file, then rename or group the declarations under a selector that suits your project.

What utility classes map to

Every Tailwind utility is a shorthand for one or more CSS declarations. Spacing utilities use a scale where each step equals 0.25rem, so p-4 becomes padding: 1rem and mt-2 becomes margin-top: 0.5rem. Color utilities resolve to specific hex or rgb values from the default palette, and sizing, typography, and flexbox utilities map directly onto their CSS counterparts.

Utility	Plain CSS
flex	display: flex
text-center	text-align: center
w-full	width: 100%
rounded-lg	border-radius: 0.5rem

Prefixed utilities follow a pattern too. Responsive prefixes such as md: wrap their declarations in a media query, while state prefixes like hover: attach a pseudo-class to the selector.

When you need the conversion

Converting to plain CSS is useful when extracting a reusable component out of a utility-heavy markup file, where collapsing a long class list into a named selector keeps the HTML readable. It also helps when debugging a layout, since seeing the literal property values makes it clear why an element is sized or positioned a certain way. Finally, it is essential when moving a snippet into a project that does not run Tailwind, such as an email template, a plain stylesheet, or a CMS theme.

FAQ

Does it handle responsive prefixes like md: and lg:?

Yes. Prefixed utilities are expanded with their breakpoint media queries so the output reflects the same conditional behavior the utility produced.

Will arbitrary values such as w-[37px] convert?

Arbitrary value syntax maps the bracketed value straight into the property, so w-[37px] becomes width: 37px without referencing the spacing scale.

Can it convert CSS back into Tailwind classes?

No. This tool only runs in one direction, expanding utility classes into CSS. It does not infer utilities from arbitrary CSS declarations.

Do I need a Tailwind config for it to work?

No. It uses the default Tailwind scale and palette, so it runs on pasted classes alone without any project setup or configuration file.