Tailwind to CSS

Unpacking utility classes

Each Tailwind class is a shortcut for one or a few CSS declarations. pt-4 is padding-top: 1rem, flex is display: flex, and text-center is text-align: center. Translating a string of utilities back to plain CSS is useful when you are leaving Tailwind, debugging a specificity clash, or explaining what a component actually does to someone who does not use the framework.

The spacing scale is the key

Most numeric utilities map through a 4px base: the number is quarters of a rem, so 4 is 1rem (16px), 2 is 0.5rem, and 8 is 2rem. Knowing that one rule lets you decode padding, margin, gap, width, and height classes at a glance.

Example

<!-- Tailwind -->
<div class="flex items-center gap-2 px-4 py-2 rounded-lg">

/* equivalent CSS */
.box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
}

The px-4 py-2 pair becomes shorthand padding, and rounded-lg resolves to a fixed 0.5rem radius from the theme.

Pitfalls

Responsive and state prefixes do not translate to a flat rule. A class like md:flex is a @media block, and hover:bg-blue-500 is a :hover selector, so a naive converter that drops the prefix changes the behavior. Arbitrary values in square brackets, such as top-[7px], pass through literally. For the raw palette numbers behind color utilities, keep the Tailwind colors reference open.

FAQ

Do custom themes change the output? Yes. If a project overrides the spacing or color scale, p-4 might not be 1rem. A generic converter assumes the defaults.

What about !important? The ! prefix (for example !mt-0) adds !important to the declaration.

Can I go the other way? Converting plain CSS to Tailwind is lossier, because many CSS values have no exact utility and fall back to arbitrary bracket syntax.