Tailwind CSS Utility Classes: Build Your First Card, Part 2 of 5

This is part 2 of the Tailwind CSS series. In part 1 we set up a project and got a heading on screen. Now we will build the first real piece of the page: a feature card. Along the way you will learn the handful of utility families that account for most of what you will ever write.

I’ll be honest about something before we start. The first time I used Tailwind, I hated it. The HTML looked like a wall of text, and I was sure I would never remember what tracking-wide did. Two weeks later I could read those class lists the way I read sentences. The trick is not to memorise hundreds of names. It is to learn the families, and the names fall into place.

Replace the body with a card

Open index.html and replace everything between <body> and </body> with the markup below. Leave the stylesheet link and the script tag where they are.

<body class="bg-slate-50 p-8">
  <article class="max-w-sm rounded-xl bg-white p-6 shadow-md">
    <p class="text-sm font-semibold uppercase tracking-wide text-teal-700">Guide</p>
    <h2 class="mt-2 text-xl font-semibold text-slate-900">Utility classes</h2>
    <p class="mt-3 leading-relaxed text-slate-600">Small single-purpose classes you combine in the markup.</p>
    <a href="#" class="mt-6 inline-block font-medium text-teal-600 hover:underline">Read the guide</a>
  </article>
</body>

Save and look at the page. You should see a white card with rounded corners and a soft shadow, sitting on a pale background. The text is teal, slate and bold where it should be. Every one of those effects came from a class name, and not one line of custom CSS.

Read a class list from left to right

Take the link at the bottom of the card: mt-6 inline-block font-medium text-teal-600 hover:underline. Each piece answers a question. mt-6 says how far it sits from the element above. inline-block says how it takes up space. font-medium sets the weight, text-teal-600 sets the colour, and hover:underline adds an underline only while the pointer is over it. Once you read them as questions, the list stops looking like noise.

Question	Family	Examples from the card
How far from its neighbours?	Spacing	p-6, mt-2, mt-6
How big is it?	Sizing	max-w-sm
What does the text look like?	Typography	text-xl, font-semibold, leading-relaxed, uppercase
What colour is it?	Colour	bg-white, text-slate-900, text-teal-700
What shape and depth?	Borders and effects	rounded-xl, shadow-md
What happens on interaction?	Variants	hover:underline

Change one thing and watch it move

The fastest way to learn a utility is to change it. Swap rounded-xl for rounded-none and the corners go square. Change shadow-md to shadow-xl and the card lifts off the page. Change text-teal-700 to text-rose-700 and the eyebrow label turns red. Each change is one class, and the rest of the card is untouched. Keep the browser open next to your editor and save after every edit, because Vite reloads the page for you.

Spacing: the one scale you need to learn

Spacing utilities use a single numeric scale, and the numbers are multiples of a quarter rem. p-4 is one rem of padding, p-6 is one and a half, and p-8 is two. Margin works the same way with m, and the directional forms add a letter: mt- for top, mx- for left and right, px- for horizontal padding. Once you have the scale in your head, you stop asking “how many pixels is that?” and start choosing from a consistent set.

A common beginner habit is to add a margin to every element to push it away from the one above. Try a different approach. Put a gap on the parent instead, using flex gap-4 or grid gap-4. The spacing then lives in one place, and you do not have to remove a stray margin from the first or last child.

Colour and text: small choices with big effects

Colours come in named families with a shade number, from 50 for the palest to 950 for the darkest. slate-600 is a good default for body text, because it is readable on white without being as harsh as black. Use the same family for related elements so the page feels intentional: a teal eyebrow label, a teal link and a teal button look like one brand.

Text utilities follow the same pattern. Size is text-sm through text-4xl, weight is font-normal through font-bold, and leading-relaxed loosens the line height for paragraphs. uppercase with tracking-wide is the usual pairing for small labels, because capitals need a little extra space between letters to stay legible.

Keep going in the series

This series builds one project, so each part picks up where the last one stopped. Here are the other parts:

• Part 1: Set up Tailwind CSS v4 with Vite
• Part 3: Responsive layouts with grid and breakpoints
• Part 4: Buttons, states and a pricing card
• Part 5: Dark mode and a brand theme

Frequently asked questions