Tailwind CSS Utility Classes
Tailwind class names follow simple patterns, so once you learn the patterns you can guess most classes.
The Pattern of a Class Name
Most classes are made of a property part and a value part:
| Class | Property part | Value part | Meaning |
|---|---|---|---|
text-lg | text | lg | Large font size |
text-red-500 | text | red-500 | Red text colour |
bg-white | bg | white | White background |
p-4 | p | 4 | Padding on all sides |
mt-2 | mt | 2 | Margin on the top |
w-full | w | full | Width 100% |
rounded-md | rounded | md | Medium rounded corners |
Some classes have no value part because they do one fixed thing: flex, hidden, italic, underline, uppercase.
The Spacing Scale
Numbers in spacing and size classes come from one scale. Each step is 0.25rem, which is 4px with the normal font size.
| Number | Size |
|---|---|
1 | 0.25rem (4px) |
2 | 0.5rem (8px) |
4 | 1rem (16px) |
6 | 1.5rem (24px) |
8 | 2rem (32px) |
12 | 3rem (48px) |
So p-4 is 16px padding, and p-8 is 32px. The same numbers work for margin, gap, width and height.
Combining Classes
You build a design by stacking classes. The order of classes in the class attribute does not matter.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8 space-y-4">
<p class="text-gray-700">Plain text.</p>
<p class="text-gray-700 font-bold">Bold text.</p>
<p class="text-gray-700 font-bold uppercase">Bold uppercase text.</p>
<p class="text-white font-bold uppercase bg-cyan-600 p-3 rounded-md">Now with a background, padding and rounded corners.</p>
</body>
</html>space-y-4 on the body adds vertical space between its children.
Building a Button
Here is a typical button. Read the classes one by one; each adds one style.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="p-8">
<button class="bg-cyan-500 text-white font-semibold px-5 py-2 rounded-lg shadow-md">
Enrol Now
</button>
<button class="border-2 border-cyan-500 text-cyan-600 font-semibold px-5 py-2 rounded-lg ml-3">
Learn More
</button>
</body>
</html>Arbitrary Values
If the scale does not have the exact value you need, put any CSS value in square brackets:
Example
<div class="w-[350px] bg-[#1da1f2] mt-[13px] text-[15px]">
Exact values in brackets
</div>| Class | CSS |
|---|---|
w-[350px] | width: 350px |
bg-[#1da1f2] | background-color: #1da1f2 |
text-[15px] | font-size: 15px |
Use arbitrary values only when you really need them. Sticking to the normal scale keeps your design consistent.
Negative Values
Put a minus sign in front of margin classes to pull an element: -mt-4 gives margin-top: -1rem.
Exercise
Exercise
With the default Tailwind scale, how much padding does p-6 add?