How class names are built
You do not have to memorise Tailwind classes one by one: almost all of them follow one pattern. Once you know it, you can guess most classes and quickly find the rest in the documentation.
Property and value
A name usually consists of a shortened property and a value joined by a dash:
| Class | CSS |
|---|---|
text-center | text-align: center |
font-bold | font-weight: 700 |
bg-white | background-color: white |
w-full | width: 100% |
hidden | display: none |
flex | display: flex |
Some classes are a single word when the value is obvious: flex, hidden, italic, underline.
The spacing scale
The numbers in p-4, m-2, gap-6, w-64 are not pixels but steps of a scale. One step is 0.25rem, which is 4 pixels at the default font size:
| Class | Value |
|---|---|
p-1 | 0.25rem (4px) |
p-2 | 0.5rem (8px) |
p-4 | 1rem (16px) |
p-8 | 2rem (32px) |
See the difference:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="bg-indigo-100 p-2">p-2</div>
<div class="mt-2 bg-indigo-100 p-4">p-4</div>
<div class="mt-2 bg-indigo-100 p-8">p-8</div>Three bars with 8, 16 and 32 pixels of padding. The same scale works for padding, margins, gaps, width and height, so elements on the page line up well. In Tailwind 4 any whole number works: p-7 or mt-13 are fine too.
Sides and axes
A letter after the property picks the side:
| Part | Side |
|---|---|
t, r, b, l | Top, right, bottom, left |
x | Left and right |
y | Top and bottom |
So pt-4 is top padding, px-6 is left and right padding, my-2 is top and bottom margin.
Negative values
A minus in front of a class makes the value negative: -mt-4 gives margin-top: -1rem. It is used to nudge an element, for example a badge overlapping an image.
Modifiers
A prefix followed by a colon is called a variant: it applies the class only under a condition. hover:bg-indigo-500 changes the background on hover, md:flex turns on flexbox on wide screens. Variants have their own lessons; for now remember the condition:class form.
Common mistake
Writing classes "the natural way", as in CSS:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<p class="text-bold padding-4">Headphones</p>
<p class="font-bold p-4">Headphones</p>The first paragraph did not change: text-bold and padding-4 do not exist. Bold is font-bold, padding is p-4. When a class does not work, check its name in the documentation or in your editor's suggestions — VS Code has the official Tailwind CSS IntelliSense extension.