Your First Utility Classes
Building a simple card component to see how naming conventions and value scales work across Tailwind's utilities.
2 min read
The fastest way to learn Tailwind's vocabulary is to build something small and read every class out loud. Let's style a simple notification card.
<div class="max-w-sm rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
<h3 class="text-base font-semibold text-slate-900">Payment received</h3>
<p class="mt-2 text-sm text-slate-600">
Invoice #1042 was paid on March 3.
</p>
<button class="mt-4 rounded-md bg-slate-900 px-3 py-1.5 text-sm font-medium text-white">
View invoice
</button>
</div>Reading the pattern
Most Tailwind classes follow the same shape: a property abbreviation, then a value. Once you notice the pattern, unfamiliar classes stop being unfamiliar:
p-6→ padding, value6(Tailwind's spacing scale, covered next lesson)mt-2/mt-4→ margin-toptext-sm/text-base→ font-size, using named steps instead of pixel valuesfont-semibold/font-medium→ font-weightrounded-xl/rounded-md→ border-radius, from small steps to fully roundborder-slate-200/bg-white/text-slate-900→ color utilities, where the property comes first (border,bg,text) and the color name and shade come after
That last group is worth pausing on: colors in Tailwind are always {property}-{color}-{shade}, with shades running from 50 (near-white) to 950 (near-black) in increments of 100. slate-200 is a light gray; slate-900 is a near-black. Once you know one color's scale, you know them all, because every color follows the same numbering.
Why a scale instead of arbitrary numbers
Notice that p-6, mt-2, and mt-4 don't correspond directly to round numbers like 24px or 8px — they're steps on Tailwind's spacing scale (p-6 is 1.5rem, mt-2 is 0.5rem). Picking values from a shared scale, rather than typing arbitrary pixel values everywhere, is what keeps a page's spacing visually consistent — every margin and padding in your project comes from the same small set of options instead of forty slightly different one-off values that accumulated over time.
Order doesn't matter, readability does
Tailwind doesn't care what order classes appear in — p-6 rounded-xl and rounded-xl p-6 compile identically. Many teams still adopt a consistent ordering (layout, then spacing, then typography, then color) purely for human readability, and editor plugins like Prettier's Tailwind plugin can sort classes automatically so nobody has to enforce it by hand.
The rest of this course walks through each utility category in more depth — spacing and sizing, typography, color, layout — but the card above already contains the core idea: describe an element's appearance with a sequence of small, composable classes instead of a named CSS rule.