Tailwind CSS

The utility-first approach

Instead of writing custom CSS classes like .button-primary, Tailwind provides pre-built utilities applied directly in HTML: class="bg-blue-500 px-4 py-2 rounded". This might look verbose initially, but delivers significant advantages.

No context switching between HTML and CSS files. No naming classes. No wondering if deleting CSS will break something elsewhere. Styling lives where it's used, making maintenance straightforward.

Performance benefits

Tailwind's build process automatically purges unused styles. Your final stylesheet contains only utilities actually used in your HTML—typically under 10KB. Traditional CSS approaches accumulate dead code over time, shipping unused styles indefinitely.

Smaller stylesheets mean faster page loads. Combined with Astro's static generation, this delivers instant rendering on every device.

Design consistency

Tailwind's spacing scale (4px, 8px, 12px, 16px...) ensures consistent spacing throughout designs. Colour palettes enforce brand consistency. Type scales prevent random font sizes.

The Fernside palette extends Tailwind with our brand system. Custom colours, typography settings, and spacing all integrate seamlessly with Tailwind's utilities.

Development speed

Tailwind accelerates development dramatically. No writing CSS from scratch. No debugging cascade issues. No fighting specificity wars. Apply utilities, see results immediately.

The consistent API means once you learn Tailwind, you can style any component quickly. This speed matters during iteration—adjust spacing, colours, or layouts in seconds rather than minutes.

Responsive design built-in

Tailwind's responsive modifiers make responsive design trivial: class="text-base md:text-lg lg:text-xl". Mobile-first by default, adding complexity only for larger screens.

We use Tailwind across every Fernside build. It delivers the productivity, performance, and maintainability our approach requires.