Tailwind CSS development with a design system behind it
Tailwind works when colours, spacing and type sizes come from one agreed set. Without that set, it turns into long class lists nobody wants to edit.
Reviewed by: Rahul Jaiswar, founder
Utility classes, briefly
Tailwind CSS is a utility-first CSS framework: small single-purpose classes go straight into the markup instead of separate stylesheets. Its build step keeps only the classes a project uses.
Where we use it
We style websites and web apps with it, including this site.
What we check
We check that no global reset sits outside Tailwind’s layers. An unlayered rule quietly outranks spacing utilities, so margins look ignored while the classes themselves are right.
Traps to avoid first
- Class names built from strings. Tailwind scans for complete class names, so
bg-${colour}-500does not get generated. Map values to full class names. - The v3 to v4 config move. Tailwind v4 moves theme settings from the JavaScript config file into CSS with
@theme. When upgrading, move tokens deliberately and check that custom colours and spacing still generate.
Will Tailwind match the design your designer sent?
If the design has tokens, yes. Tailwind suits a design where a fixed palette and spacing scale make off-scale values stand out in review. A file where every screen invents its own greys and gaps will work, but the class lists grow long and nobody enjoys editing them later. It also suits component code, such as React, where deleting a component removes its styles with it.
It fits less well when most content is long CMS articles, which need separate typography styles, or when new pages join an old site with a large stylesheet and two systems fight over which rule wins.
Before styling starts, ask where colours and spacing are defined and whether a brand colour can change in one place. Ask how focus states and dark mode are handled, and whether colour pairs were checked for readable contrast.
For animation on top of these styles, see the Motion page. Websites are built under our websites service.
Send us the design
Send what exists today: a Figma file, a brand guide or the current site.