How to read the class names

p-4 mt-8 text-blue-500 rounded-xl—incantations at first sight, but there are only three rules. Once they click, the memorisation load collapses and you can guess classes you’ve never seen.

Rule 1: a class name is “what” plus “how much”

Almost every class has this shape.

p-4
│ └── how much (the value)
└──── what (the property)

The “what” part is an initial or abbreviation of a CSS property name.

To narrow it to one side, add one letter to the prefix. This part is regular, so you learn it once.

So px-4 py-2 is “1rem left and right, 0.5rem top and bottom”—the same as plain CSS’s padding: 0.5rem 1rem;. x and y come up constantly, so get those two into your hands early.

Rule 2: the numbers are steps, not pixels

This is the first thing that trips everyone. p-4 is not 4px.

The number says which step in the scale. By default one step is 0.25rem (4px at a 16px base), giving:

The trick is “multiply by four to get px.” p-4 is 16px, p-6 is 24px, p-8 is 32px. You can do it in your head.

Values that aren’t numbers

The length family also has some useful non-numeric values.

Rule 3: colours are “name plus shade”

Colours take the form name-shade.

bg-blue-500
│  │    └── shade (50–950)
│  └─────── colour name
└────────── what it's applied to (background)

50 is the lightest, 950 the darkest.

The ones you’ll actually reach for most are 50–100 (backgrounds) and 600–700 (text). Use 500 for logos and accents; as a text colour it’s often too light to read comfortably.

<!-- light background, dark text: the readable classic -->
<p class="bg-blue-50 text-blue-800 p-4">Notice</p>

The colour names are slate gray red orange amber yellow lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose. You don’t need them all—settling on three or four is enough.

Font sizes are names, not step numbers

Unlike the numeric scale, font sizes use clothing-size names.

base is the standard 16px; sm → xs go smaller, lg → xl → 2xl go larger. From 2xl up it counts in numbers, so big headings use text-3xl or text-4xl.

When the scale doesn’t have what you need

If you genuinely need a value that isn’t in the scale, square brackets take anything.

<div class="p-[13px] text-[#ff8a3d] w-[420px]">
  arbitrary values
</div>

Handy—but overusing it throws away the benefit of the scale (you’re back to drifting spacing). Save it for cases with a reason, like a specific value handed to you in a design file.

Test whether it stuck

Let’s check. What is this class list doing, in plain CSS?

<button class="px-6 py-3 bg-orange-500 text-white text-lg font-bold rounded-full">
  Send
</button>

The answer:

button {
  padding: 0.75rem 1.5rem;   /* py-3 px-6 → 12px 24px */
  background-color: #f97316; /* bg-orange-500 */
  color: #fff;               /* text-white */
  font-size: 1.125rem;       /* text-lg */
  font-weight: 700;          /* font-bold */
  border-radius: 9999px;     /* rounded-full */
}

You just read down the list. One class, one declaration, so it reads like translation.

Summary of this lesson

1. A class name is “what-how much.” Narrow the side with x y t b l r
2. Numbers are steps, not pixels. p-4 is 16px—multiply by four
3. Only having steps is what keeps spacing consistent across the whole site
4. Colours are “name-shade.” 50 light, 950 dark; text at 600–700, backgrounds at 50–100
5. text- does double duty—decided by what follows
6. Square brackets like p-[13px] fill gaps, but overuse cancels the benefit

Next we use these rules to build Flexbox and Grid layouts, lined up one-to-one with the CSS you already know.