CSS to Tailwind Converter

How to use the css to tailwind converter

1. Paste CSS declarations (display: flex; padding: 16px;) or full rules with selectors into the CSS box.
2. Read the classes. For plain declarations you get one class list, and for rules you get one line per selector, with hover:, md: and similar variants added.
3. Check the note for arbitrary values, which are written as [..], and for declarations that were not converted.
4. Copy the classes into your class or className attribute and remove the old CSS.

How this CSS to Tailwind converter picks classes

Each declaration is matched against the Tailwind CSS v3 default theme. The converter reads the number and unit, turns rem into pixels at 16px, and looks for an exact match in the spacing scale, the palette, the font size scale, the radius scale or the shadow list. padding: 16px and padding: 1rem both become p-4, and background-color: #3b82f6 becomes bg-blue-500.

When no exact utility exists, the value is kept as written in square brackets, for example p-[13px] or bg-[#123456]. A property Tailwind has no utility for becomes an arbitrary property such as [animation:spin_1s_linear_infinite]. Nothing is rounded to a nearby value, so the generated classes produce the same CSS as your input.

Spacing scale: pixels to Tailwind classes

The default spacing scale is the same for padding, margin, gap, width, height and inset. A step of 1 is 0.25rem, which is 4px.

Margins and inset values can be negative, which gives -mt-4 or -left-2. A value of auto gives mx-auto. Shorthands collapse: margin: 0 auto becomes my-0 mx-auto, and four equal sides become a single class.

Colors, font sizes and borders

Colors are matched by their exact hex value in the default palette. Short hex, uppercase hex, rgb() and hsl() are all normalized first. A color with alpha becomes an opacity modifier, so rgba(0, 0, 0, 0.5) is bg-black/50.

Note that text-sm sets a line height as well as a font size. If your CSS has only font-size, the converter adds a note, and text-[14px] changes the size alone. Border radius maps 4px to rounded, 6px to rounded-md, 8px to rounded-lg and 9999px to rounded-full.

Selectors, pseudo-classes and media queries

When the input has rules, the converter groups classes by selector. A simple class selector with pseudo-classes becomes variants: :hover is hover:, :first-child is first:, and ::before is before:. A min-width media query that matches a breakpoint becomes sm:, md:, lg:, xl: or 2xl: (640, 768, 1024, 1280 and 1536 pixels). Other widths use min-[500px]:. Selectors with descendant combinators cannot be expressed as a variant, so the converter lists the classes and tells you to put them on the matching element.

!important becomes the ! modifier, as in !text-white. If a property is repeated in one rule, only the last value is kept, as in the cascade.

Tailwind to CSS: reading classes the other way

To go from Tailwind to CSS, look up the class in the default theme. This converter works only in the CSS to Tailwind direction, but the table shows what common utilities expand to.

If your project customizes tailwind.config.js, the class names for your own spacing or colors can differ from these defaults. For the stylesheet side, the CSS formatter and CSS minifier help, and the Tailwind gradient generator builds gradient classes. Coming from a preprocessor? Compile first with the LESS to CSS converter or the SCSS to CSS converter.

Worked examples

Sources and references

• Tailwind CSS v3 default theme: spacing, colors, font sizes and shadows used for the mapping