Tailwind CSS

What Tailwind CSS is

Tailwind CSS is an open-source, utility-first CSS framework, first released in 2017. Rather than giving you pre-built buttons and cards to drop in, it gives you a large set of small, single-purpose utility classes, things like flex, pt-4, text-lg or bg-blue-600, that you compose directly in your markup to build any design you want.

The key idea is that you style elements where they live, using classes that map to a consistent set of design tokens: a defined colour palette, a spacing scale, a type scale and so on. Because those tokens are configured once for the project, everything you build draws from the same brand system. And because Tailwind scans your code and only compiles the classes you actually use, the CSS that ships to the browser stays remarkably small.

How HDC uses Tailwind

Tailwind is our styling layer on every build, and it’s how this very site is styled. In practice that means:

• We turn a client’s brand into Tailwind design tokens first: their exact colours, fonts, spacing and breakpoints. Every page then styles from that single source.
• We build layouts mobile-first using Tailwind’s responsive variants, so pages look right on a phone on a job site before we scale them up to desktop.
• We wrap repeated patterns, buttons, cards, form fields, section layouts, into reusable Astro and React components, so a class change happens in one place, not scattered across pages.
• We let Tailwind’s compiler strip out every unused class, so the production stylesheet is tiny and contributes to fast load times.

Why we apply it

For trades and local businesses, a site needs to do two things at once: look polished and on-brand, and load fast. Tailwind helps with both. Pulling every colour, button and spacing decision from one token set means a large site looks deliberately designed rather than stitched together, and that visual consistency quietly builds trust with a prospect deciding who to call.

At the same time, Tailwind’s tiny compiled output means there’s very little CSS to download, which helps the speed and Core Web Vitals that Google rewards. And because styling is fast to write and easy to change, more of the project budget goes into getting the design and conversion details right rather than wrestling with stylesheets.

How Tailwind fits our stack

Tailwind is the styling glue across our whole front end. It sits on top of Astro, which renders the pages; it’s compiled and optimised by Vite during the build; and it styles the React islands we add for interactivity using the exact same tokens, so a form looks identical to the rest of the page. Prettier keeps the Tailwind classes tidy and consistently ordered, and the design tokens themselves usually trace back to a Figma design. One styling system, applied consistently everywhere, is what keeps a multi-page client site coherent.

When Tailwind isn’t the right tool

We’re honest about fit. For a tiny one-page, hand-coded site with no build step, pulling in Tailwind’s tooling can be overkill, a small amount of plain CSS is simpler. Tailwind also relies on shared components to stay consistent at scale; used carelessly without them, utility classes can drift. On our builds that isn’t an issue, because Tailwind lives inside a componentised Astro project where the design system is enforced, which is exactly where it pays off most.