Tailwind to CSS Converter

Using the Tailwind to CSS Converter

What is converted

Display, position, flexbox and grid, spacing (padding, margin, gap and space utilities), width, height and max sizes, typography (sizes, weights, line height, letter spacing, alignment, transforms), borders and radius, shadows, opacity, transitions, translate, scale and rotate, plus any arbitrary value or arbitrary property such as w-[340px] or [mask-type:luminance].

Spacing and sizes

Tailwind's spacing scale steps by 0.25rem, so p-4 is 1rem and gap-6 is 1.5rem. Font size utilities set both the size and a matching line height, exactly as Tailwind does, and fractions such as w-1/2 become percentages.

Variants

hover:, focus:, focus-visible:, active: and disabled: become pseudo-class rules, and sm: to 2xl: become min-width media queries at Tailwind's default breakpoints. Dark mode classes are converted to a prefers-color-scheme: dark query.

Theme colours

Named colours such as bg-blue-500 come from your Tailwind theme and their values differ between versions, so the converter does not guess them. They are listed under unconverted classes; replace them with your theme's value or an arbitrary colour like bg-[#5B8CFF].

When to keep Tailwind instead

Converting is useful for moving a component into a project without Tailwind, but within a Tailwind project utility classes are usually easier to maintain than a parallel stylesheet. If a class list is getting long, consider extracting a component in your framework rather than converting it to CSS.

Frequently asked questions