Lesson 6 +10 XP

Styling with Utility Classes

Building complex components from a constrained set of primitive utilities is the heart of Tailwind.

Combining classes

You style an element by combining many single-purpose classes directly in markup:

<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg">
  <img class="size-12 shrink-0" src="/img/logo.svg" alt="ChitChat Logo" />
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

flex, shrink-0, p-6 control layout
max-w-sm, mx-auto constrain and center the card
bg-white, rounded-xl, shadow-lg handle appearance
size-12 sets the image width and height
gap-x-4 spaces the logo and text
text-xl, font-medium, text-black style the text

Every utility is theme-driven

Most utilities are driven by theme variables, like bg-blue-500, text-xl, and shadow-md. Static utilities like flex and object-cover always exist.

How does the CSS get generated?

Tailwind isn't one big static stylesheet. It scans all your files looking for class-name-like symbols, then generates only the CSS those classes need. This keeps the compiled file small.

Composition for one property

Multiple classes can build one CSS property using variables. For example blur-sm grayscale both affect the filter property:

<div class="blur-sm grayscale">...</div>

Each utility sets a CSS variable for its effect, and the filter property reads all of them, falling back to nothing when a variable isn't set. Tailwind uses this trick for gradients, shadow colors, transforms, and more.

TL;DR

Combine many small utilities directly in markup.
Utilities are driven by your theme variables.
Tailwind scans your source and generates only needed CSS.
Some utilities compose via CSS variables (filters, transforms).

Styling with Utility Classes