Frontend
Tailwind CSS
Tailwind CSS is a utility-first CSS framework that turns a design system into code. Why I use it for consistent, maintainable styling.
Request an AI summary
Tailwind CSS is a CSS framework built from small utility classes: spacing, colours, typography and layout are applied directly in the markup, based on a shared configuration of design tokens.
Strengths: what it’s good at
- Design system in code: colours, sizes and spacing come from one theme, so every page uses the same values.
- Small CSS: only the classes that are actually used end up in the stylesheet.
- Responsive and states: breakpoints, hover, focus, dark mode and reduced motion written right next to the element.
- Maintainable: styles live with the component, so changing or deleting a component never leaves orphaned CSS behind.
Limits: what to consider
Long class lists take getting used to. Good components and a clear theme keep markup readable; without them, Tailwind projects can become as messy as any other CSS.
Use: when I choose it
In most projects I build, with Astro, SvelteKit or Next.js, set up with the brand’s tokens from the design system. This site uses Tailwind CSS.
