Sign in Get started

Tailwind CSS Tutorial · Tailwind Basics · Lesson 3 of 27

Reading Utility Classes

How Tailwind class names are built, the spacing scale, modifiers such as hover: and md:, and opacity with a slash.

Create a free account to save this page, take notes and track your progress. Sign in

The pattern

Most classes follow property-value, with optional variants in front and an opacity or modifier after a slash:

md:hover:bg-sky-500/75
│  │     │  │       └─ /75: 75% opacity
│  │     │  └───────── value: sky colour, shade 500
│  │     └──────────── property: background colour
│  └────────────────── variant: only on hover
└───────────────────── variant: only at the md breakpoint and wider

Common prefixes

Prefix CSS property Example
p, px, py, pt… padding p-4, px-6
m, mx, my, mt… margin mt-8, mx-auto
w, h, size width, height, both w-64, h-screen, size-10
text font size or colour text-lg, text-gray-700
bg background bg-white, bg-sky-100
border border width or colour border, border-2, border-gray-200
rounded border radius rounded-lg, rounded-full
font weight or family font-bold, font-mono

The spacing scale

Spacing numbers are multiples of 0.25rem (4px): p-1 = 4px, p-4 = 16px, p-8 = 32px. Any whole number works, so p-13 is fine too. Compare them:

Padding sizes side by sideTry it yourself
<div class="space-y-2 p-6 font-mono text-sm">
  <div class="bg-sky-100"><div class="bg-sky-500 p-1 w-fit">p-1</div></div>
  <div class="bg-sky-100"><div class="bg-sky-500 p-2 w-fit">p-2</div></div>
  <div class="bg-sky-100"><div class="bg-sky-500 p-4 w-fit">p-4</div></div>
  <div class="bg-sky-100"><div class="bg-sky-500 p-8 w-fit">p-8</div></div>
</div>

Negative values and auto

Put - in front for negative values (-mt-4), and use auto where CSS allows it (mx-auto centres a block).

mx-auto and a negative marginTry it yourself
<div class="p-6 bg-gray-100">
  <div class="mx-auto max-w-xs rounded-lg bg-white p-4 text-center shadow">Centred with mx-auto</div>
  <div class="mx-auto mt-6 max-w-xs rounded-lg bg-white p-4 text-center shadow">
    <span class="-mt-8 mb-2 mx-auto block size-10 rounded-full bg-violet-500 ring-4 ring-white"></span>
    Pulled up with -mt-8
  </div>
</div>

Test yourself

How much padding does p-6 add?

  1. 1.5rem (24px)
  2. 6px
  3. 6rem
  4. 60%
Show answer

Answer: 1.5rem (24px)

Spacing steps are 0.25rem each, so 6 x 0.25rem = 1.5rem.

Was this page helpful?