Tailwind to CSS Converter

Paste Tailwind utility classes and get the equivalent plain CSS declarations — covers common spacing, layout, sizing, typography, and color utilities.

Generated CSS

.element {
  display: flex;  /* flex */
  align-items: center;  /* items-center */
  justify-content: space-between;  /* justify-between */
  gap: 1rem;  /* gap-4 */
  padding: 1.5rem;  /* p-6 */
  border-radius: 0.5rem;  /* rounded-lg */
  font-size: 1.125rem;  /* text-lg */
  font-weight: 600;  /* font-semibold */
  width: 100%;  /* w-full */
}

About this tool

Tailwind CSS expresses styling as small utility classes like flex, p-6, and text-lg. Sometimes you need the plain CSS those classes represent — to explain a design, port to a non-Tailwind project, or understand exactly what a class does. This converter parses a list of Tailwind utilities and emits the equivalent CSS declarations, annotating each line with the class it came from. It covers the most commonly used utilities: margin and padding (with the Tailwind spacing scale and directional variants), flexbox and grid display and alignment, width/height keywords and arbitrary values, font size and weight, text alignment and transforms, border radius, opacity, and positioning. Classes it does not recognize are listed separately so nothing is silently dropped. It is a learning and porting aid rather than a full Tailwind compiler — for the complete, exact output, Tailwind’s own build is authoritative.

How to use it

  • Paste a space-separated list of Tailwind classes.
  • Read the generated CSS, with each line labeled by its source class.
  • Check the 'not recognized' list for uncommon utilities.
  • Copy the CSS into your stylesheet.

Frequently asked questions

What does this Tailwind to CSS converter do?
It translates common Tailwind utility classes into the equivalent CSS property declarations. For example, p-6 becomes padding: 1.5rem and flex becomes display: flex, so you can see or reuse the underlying CSS.
Does it support every Tailwind class?
No — it covers the frequently used utilities (spacing, fl/grid layout, sizing, typography, radius, opacity, position). Rare or plugin classes are listed as "not recognized" rather than guessed. For exhaustive output, use Tailwind’s compiler.
How does the spacing scale map to CSS?
Tailwind’s numeric spacing scale is 0.25rem per unit: p-4 is 1rem, p-6 is 1.5rem, p-2 is 0.5rem, and so on. Directional variants like px-, py-, mt- map to the corresponding side properties.
Does it handle arbitrary values like w-[200px]?
Yes for width and height arbitrary values — w-[200px] becomes width: 200px, and underscores convert to spaces (Tailwind’s convention). Arbitrary values for other properties are not all covered.
Why would I convert Tailwind to CSS?
To learn what utilities actually do, to migrate a component to a project that does not use Tailwind, to document a design, or to debug unexpected styling by reading the resolved properties.
Is responsive or state variant handling included?
Not in this version — prefixes like md: or hover: are treated as unrecognized. Strip them to see the base utility’s CSS, then wrap the result in your own media query or pseudo-class as needed.

Related tools