Tailwind CSS

Tailwind CSS brand colours

Extracted from the artwork and ranked by how much of the mark each covers — not from a brand book, so treat them as observed rather than official.

Tailwind CSS is a utility-first framework: instead of authoring semantic class names and a stylesheet, you compose small single-purpose classes in the markup and let a build step emit only what is used. The argument for it is that it eliminates the naming problem and the dead-CSS problem simultaneously and keeps styling colocated with the component. The argument against is markup that reads as a wall of tokens, which the community mostly resolves with component extraction. Version 4 moved configuration into CSS itself and replaced the JavaScript config file with a theme block, cutting build times substantially. It competes with CSS Modules, vanilla-extract, Panda and StyleX on the build-time end, and with styled-components and Emotion on the runtime end, most of which have lost ground as React Server Components made runtime CSS-in-JS awkward to use.