Chapter 5 covered the build process - now let's look at Tailwind itself: how utility classes work, and how Tailwind CSS v4 is configured with its CSS-first approach.

Utility-first, briefly explained

Instead of writing your own CSS classes like .team-card with their own rules in a separate CSS file, Tailwind combines many small, single-purpose utility classes directly in the HTML: one class for padding, one for border radius, one for font size, and so on.

<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
    <h3 class="text-lg font-bold text-brand-dark">Anna Example</h3>
    <p class="text-sm text-brand-slate">Development</p>
</div>

The advantage over custom CSS: you don't have to jump to a separate file while reading a template to see how an element looks - the classes are the styling. The apparent downside ("lots of classes in the HTML") fades quickly once you extract recurring combinations into your own component classes (chapter 12).

Tailwind v4: CSS-first with @theme

In older Tailwind versions (v2/v3), the entire configuration - colors, spacing, breakpoints - lived in a tailwind.config.js. Starting with Tailwind CSS v4, that moves primarily into the CSS itself, via the @theme directive (as already shown in chapter 5):

@import 'tailwindcss';

@theme {
  --color-brand-dark: #1a2332;
  --color-brand-slate: #475569;
  --color-brand-accent: #0ea5e9;
  --spacing-card: 1.5rem;
  --breakpoint-3xl: 1920px;
}

Every --color-* variable automatically generates matching utility classes (text-brand-dark, bg-brand-dark, border-brand-dark, ...). Likewise, --breakpoint-3xl automatically generates a 3xl: responsive prefix. There are no longer two separate sources of truth (JS config vs. actual CSS) - the configuration is the CSS.

Key utility categories at a glance

• Spacing - p-4, px-6, mt-10, gap-4
• Typography - text-lg, font-bold, leading-relaxed
• Colors - text-brand-dark, bg-white, border-slate-200
• Layout - flex, grid, grid-cols-3, gap-6
• States - hover:bg-brand-accent, focus:ring-2

Where the actual Tailwind configuration lives in the project

For this project, the central configuration file lives at app/design/frontend/Mironsoft/default/web/tailwind/src/styles.css. Every new color, every new breakpoint for a new feature - like the team page starting in chapter 17 - gets added right there, not in a tailwind.config.js.