Tailwind CSS Converter

Paste Tailwind classes to get plain CSS, or paste CSS to get the matching Tailwind classes.

Private by design

Your inputs stay on your device and are not sent to our servers. Optional usage analytics does not receive your files or tool inputs.

Tailwind CSS Converter

Tailwind classes to CSS, and CSS to Tailwind classes

Tailwind classes or CSS

Result

The result appears here.

Options

CSS output

Selector for the one rule

Name each rule in a comment

Class output

Tailwind turns small classes into CSS. This tool shows the CSS a class stands for, and finds the class for a piece of CSS. One spacing unit is 0.25rem (4 px), so p-4 is padding: 1rem.

Use One rule to paste the CSS under a single selector of your own.
Variants like hover:, md: and dark: become their own rules.
w-[13px] style classes are Tailwind's way to use a value that is not on the scale.

Hand-written lookup of Tailwind's default theme: spacing in 0.25rem steps, the default type, radius, shadow and breakpoint scales (sm 640, md 768, lg 1024, xl 1280, 2xl 1536 px). Reverse matching treats px and rem, short and long hex, and padding or margin shorthands as equal. No Tailwind code is loaded and nothing leaves your browser.

Preparing tool

How to use Tailwind CSS Converter

Paste Tailwind classes or CSS. The direction is detected, or you can choose it.
Pick separate rules or one merged rule, and read the notes for anything that was not on the default scale.
Copy the result or download it.

Read the detailed guide →

What are the limits of Tailwind CSS Converter?

Covers the common core of Tailwind's default theme (spacing, sizing, layout, flex, grid, text, borders, radius, shadow, opacity, transitions and the gray, red, blue and green colour scales), not every utility or plugin, and not custom themes. Colours use the classic hex palette; newer Tailwind versions use OKLCH values that look almost the same. CSS that has no matching class becomes an arbitrary value like w-[13px]. Your text stays on your device.