The Tailwind Cheat Sheet I Actually Keep Open: Utility Classes by Category

Tailwind has a few hundred utility classes, and almost nobody memorizes all of them. What you actually need is a mental map: which class touches spacing, which touches layout, which touches color, and how the prefixes stack on top. Once that map is in your head, you stop hunting through docs and start writing markup at the speed you think. This guide lays out the categories that matter, the utility-first model that ties them together, and a worked example you can paste into a component today.

The utility-first mental model

A utility class does exactly one thing. pt-4 sets padding-top: 1rem. text-red-500 sets a specific red. flex sets display: flex. Instead of inventing a class name like .card-header and then writing CSS for it in a separate file, you compose a handful of single-purpose classes right on the element:

<div class="flex items-center gap-4 p-4 rounded-lg bg-white shadow-md">

That one line sets a flex row, vertically centers the children, puts a 1rem gap between them, adds 1rem of padding, rounds the corners, paints the background white, and drops a medium shadow. No stylesheet, no naming, no specificity fight.

The trade is honest: your HTML gets longer. The payoff is that you stop maintaining a stylesheet that quietly drifts out of sync with your markup, and you stop inventing names like .card-header-subtitle-mobile. On a project with fifty-plus components, most teams find that trade pays off. The classes are predictable enough that a searchable reference closes the gap fast — that is exactly what the Tailwind cheat sheet is for, with a live preview next to every entry so you see the effect instead of guessing it.

Spacing, sizing, and the rem-to-px math

Spacing is the category you reach for constantly, and Tailwind's scale is the part people fumble. The unit is 0.25rem, so the number in the class is "quarters of a rem" — p-4 is 1rem (16px), p-6 is 1.5rem (24px), gap-2 is 0.5rem (8px). The quick conversion: multiply the class number by 4 to get pixels.

The full spacing family:

p-* / px-* / py-* / pt-* — padding, all sides or one axis or one edge
m-* / mx-* / my-* / mt-* — margin, same pattern, and mx-auto to center
gap-* / gap-x-* / gap-y-* — the gap between flex and grid children
space-x-* / space-y-* — spacing between siblings without touching gap

Sizing follows the same scale: w-4, h-10, min-w-0, max-w-md, and the Tailwind 3.4+ size-8 shorthand that sets width and height at once. When the design hands you "24px of padding," p-6 is your answer — no dividing by 4 in your head once the conversion is muscle memory.

Flex and grid layout

Layout splits into two families. Flexbox handles one-dimensional rows and columns; grid handles two-dimensional structure.

Flex essentials:

flex then flex-row or flex-col — set the direction
items-center / items-start / items-stretch — cross-axis alignment
justify-between / justify-center / justify-end — main-axis distribution
flex-1 / shrink-0 / grow — how children share leftover space
flex-wrap — let children wrap to the next line

Grid essentials:

grid then grid-cols-3 or grid-rows-2 — fixed track counts
col-span-2 / row-span-3 — make a cell span multiple tracks
place-items-center — center content in every cell at once
gap-4 — the same gap utility, shared with flex

For a classic centered row you write flex items-center justify-between. For a card grid you write grid grid-cols-3 gap-6. That is most layouts covered with six classes.

Typography and color

Typography is mostly scales. Font size runs text-xs, text-sm, text-base, text-lg, all the way to text-9xl. Weight runs font-thin through font-black, with font-bold doing most of the work. A heading is usually just text-2xl font-bold. Round it out with leading-tight (line height), tracking-wide (letter spacing), text-center, truncate for single-line overflow, and line-clamp-2 to cap a paragraph at two lines.

Color is a two-part name: a property prefix plus a palette token at a shade from 50 to 950. bg- paints backgrounds, text- paints text, border- paints borders, ring- paints focus rings. So bg-slate-900 text-slate-100 is a dark surface with near-white text, and border-blue-500 is a clear blue edge. The palette runs slate through rose, and the shade number tracks lightness — 50 is nearly white, 500 is the saturated middle, 950 is nearly black.

When you need a gradient instead of a flat fill, the syntax is bg-gradient-to-r from-cyan-500 to-pink-500. If you would rather dial the exact stops visually and copy the result, the gradient generator hands you the CSS, and the cheat sheet's background rows show every direction keyword rendered live.

Responsive prefixes and state variants

This is where Tailwind goes from "a list of classes" to "a system." Two prefix types stack onto any utility.

Responsive prefixes are mobile-first. A class with no prefix applies at every width; a prefixed class applies at that breakpoint and up. The breakpoints are min-widths: sm 640, md 768, lg 1024, xl 1280, 2xl 1536. So text-sm md:text-base lg:text-lg reads "small on phones, base on tablets, large on desktop." The rule that trips people up: md: means medium and larger, so md:hidden hides on desktop too. Write the smallest screen as the unprefixed base, then override upward.

State variants prefix the class with an interaction or condition: hover:bg-blue-600, focus-visible:ring-2, disabled:opacity-50, dark:bg-slate-800. You can stack them with responsive prefixes — md:hover:bg-blue-600 means "on medium screens and up, change the background on hover." Reach for focus-visible: over plain focus: on buttons; the former only shows the ring for keyboard users, which is the accessible default.

Worked example: a responsive card

Say I'm building a product card: full width on phones, three across on desktop, with a hover lift and a clear call-to-action button. Here is what I actually wrote the last time I needed this, and why each class is there.

<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-4">
  <article class="rounded-xl bg-white p-6 shadow-md
                  transition hover:shadow-xl hover:-translate-y-1
                  dark:bg-slate-800">
    <h3 class="text-lg font-bold text-slate-900 dark:text-slate-100">
      Tailwind Cheat Sheet
    </h3>
    <p class="mt-2 text-sm text-slate-600 dark:text-slate-400">
      100+ utility classes with a live preview beside each one.
    </p>
    <button class="mt-4 rounded-lg bg-blue-600 px-4 py-2
                   text-sm font-medium text-white
                   hover:bg-blue-700 focus-visible:ring-2
                   focus-visible:ring-blue-400">
      Open
    </button>
  </article>
</div>

Reading it back: the outer grid grid-cols-1 md:grid-cols-3 gap-6 is the whole responsive layout — one column until 768px, three above it. The card uses rounded-xl ... shadow-md for resting state and transition hover:shadow-xl hover:-translate-y-1 so it lifts on hover. dark:bg-slate-800 swaps the surface in dark mode. The button pairs hover:bg-blue-700 for the pointer with focus-visible:ring-2 for the keyboard. I wrote the whole thing without leaving the editor, and I checked the two shadow depths and the gradient-free dark surface against the cheat sheet's live previews before committing. That is the loop the utility-first model is built for.

A quick reference to keep nearby

Spacing: p-4 = 1rem padding, gap-4 = 1rem gap, multiply the number by 4 for pixels
Flex: flex items-center justify-between for a standard aligned row
Grid: grid grid-cols-3 gap-6 for a card grid, md:grid-cols-3 to make it responsive
Type: text-lg font-bold for a heading, truncate and line-clamp-2 for overflow
Color: bg-slate-900 text-slate-100, shade 50 light to 950 dark
Responsive: mobile-first, md: is 768 and up, override upward
State: hover:bg-blue-600, prefer focus-visible: on interactive elements

Keep this map in your head and the searchable Tailwind cheat sheet open in a tab, and you will reach for the right class on the first try far more often than you reach for the docs.

Made by Toolora · Updated 2026-06-13