What it is
Tailwind CSS is a utility-first CSS framework made by Tailwind Labs. Instead of writing a custom class for each component, you compose small single-purpose classes for spacing, colour, type and layout directly in the markup. A build step scans the project and ships only the classes actually used, so the final stylesheet stays small.
Because the design rules live in one configuration file, spacing, colours and type sizes stay consistent across pages without a separate design system to maintain. It pairs naturally with component frameworks like React, where the markup and its styling sit together in one place and can be changed or deleted as a unit.
How I use it
- Styled the Rail & Sail Montessori House site with Tailwind, alongside Next.js 14, React 18 and TypeScript.
- Shipped as part of a static export to S3 and CloudFront, so there is no build or server at runtime.
- Chosen per project: the Zero Cut Tax Disability Society site uses one hand-written stylesheet and no framework instead.
Tailwind suits a component-based site where consistency matters more than hand-tuned CSS for each page. I reach for it on React and Next.js builds because the styles stay with the component, and the shipped CSS stays small. On a twelve-page hand-written site, one plain stylesheet is often the better answer.
Questions
Do you always use Tailwind for websites?
No. It suits component-based builds like the Rail & Sail site. For a small hand-written site, such as Zero Cut, one plain stylesheet with no framework is simpler.
Does Tailwind make pages heavy?
Not when it is built properly. The build ships only the classes the site uses, so the CSS stays small.