Skip to main content
CSSpeek

Free tool

Tailwind Class Decoder

Paste a Tailwind utility class string and get a category-grouped breakdown of what each class does — with resolved CSS and plain English explanations. Ideal for reading unfamiliar Tailwind markup.

Decodes the most common Tailwind v4 utilities (spacing, typography, colors, layout, effects). Arbitrary values like bg-[#123] and responsive/state prefixes are handled. Unknown classes are flagged.

Breakdown by category

  • Typography

    • text-5xl
      font-size: 3rem; line-height: 1;

      Font size 3rem with line-height 1.

    • lg:text-7xl
      font-size: 4.5rem; line-height: 1;

      Font size 4.5rem with line-height 1. Applied under: lg.

    • font-bold
      font-weight: 700;

      Font weight 700.

    • leading-tight
      line-height: 1.25;

      Line-height 1.25.

  • Color

    • text-gray-900
      color: var(--color-gray-900);

      color from the gray palette at shade 900.

  • Margin

    • mb-6
      margin-bottom: 1.5rem (24px);

      margin-bottom of 1.5rem (24px).

Combined CSS

/* text-5xl */
font-size: 3rem; line-height: 1;

/* lg:text-7xl */
font-size: 4.5rem; line-height: 1;

/* font-bold */
font-weight: 700;

/* text-gray-900 */
color: var(--color-gray-900);

/* mb-6 */
margin-bottom: 1.5rem (24px);

/* leading-tight */
line-height: 1.25;

Want to read Tailwind on any live site?

CSSpeek surfaces the full class list of any element you click — including Tailwind utilities — and lets you copy the classes or the computed CSS. Add it to Chrome to decode utility-first sites in real time.

Add to Chrome — Free

Why reading Tailwind is hard (and this tool helps)

A modern Tailwind class string can easily contain ten to twenty utilities, combining layout, typography, color, and state variants. At a glance, text-5xl lg:text-7xl font-bold text-gray-900 mb-6 leading-tight reads like noise. Grouped by category, it's obvious: a bold dark-gray heading that grows from 3rem to 4.5rem at lg, with tight line-height and a 24px bottom margin.

That's the whole point of this tool. When you're reading someone else's code, reviewing a PR, or learning Tailwind by reading the source of sites you admire, a quick paste-and-decode turns dense class strings into readable intent.

Tailwind decoder: frequently asked questions

Does this support Tailwind v3 and v4?
The decoder targets Tailwind v4 conventions (CSS variables for colors, the modern spacing scale). Most v3 classes decode correctly because the utility names didn't change much between versions.
What about arbitrary values like bg-[#123] or w-[32rem]?
Supported. The decoder recognizes arbitrary-value syntax and surfaces the literal value as the resolved CSS.
Does it handle responsive and state prefixes?
Yes. Prefixes like sm:, md:, hover:, and dark: are detected and shown alongside the underlying utility.
Why does one of my classes show as 'unknown'?
The decoder ships with a curated database of the most common utilities. Rare plugins, custom utilities, or less common classes may not be in the database yet. The utility still renders in your site — the decoder just can't explain it here.
Is my input sent to a server?
No. The decoder runs entirely in your browser.

More free CSS tools