Tailwind CSS

Tailwind CSS is a utility-first CSS framework. Instead of writing separate stylesheet files full of class names like `.hero-section` or `.card-title`, you apply small utility classes directly in the HTML: `text-white`, `font-bold`, `px-4`, `rounded-lg`. Each class does exactly one thing.

It sounds like it would make templates messy, and the first time you see it, it does look like a lot of class names. But the tradeoff is significant: you never write CSS that conflicts with other CSS, you never end up with thousands of lines of stylesheet that nobody dares touch, and design changes are made in one place without side effects.

Tailwind is used on every project for all styling. The configuration file defines the colour palette, typography scale, spacing units, and breakpoints for the whole site, which means every component automatically uses a consistent visual system rather than having slightly different shades of the same colour appearing in different places.

The production build only includes the CSS classes actually used in the project, so the stylesheet that ships to users is typically a few kilobytes rather than hundreds. That contributes directly to faster load times and better Core Web Vitals scores.