What you will learn
- Explain the utility-first approach and how it differs from writing CSS
- Style elements using Tailwind classes for spacing, colour and typography
- Build Flexbox and Grid layouts with Tailwind classes
Tailwind CSS is a framework made of small, single-purpose classes. Instead of writing a .card rule in a stylesheet, you add classes such as p-6 rounded-lg bg-white shadow directly to the element. Each class does one job: p-6 adds padding, rounded-lg rounds the corners. When the project builds, Tailwind scans your files and outputs only the CSS for classes you actually used.
Tailwind uses a consistent scale, which keeps designs tidy. Spacing classes like p-4, mt-8 and gap-6 follow one numeric scale. Text classes such as text-lg, font-semibold and text-gray-700 handle typography and colour. Because you choose from a fixed set of values rather than typing any number, spacing and sizes stay consistent across a whole site, even with several people working on it.
Layout classes map directly to the CSS you already know. flex items-center justify-between is the Flexbox header pattern from module one. grid grid-cols-3 gap-6 creates a three-column grid. The main trade-off is long class lists in your HTML. In practice, you avoid repetition by turning repeated pieces into reusable components, which you will do later with React.