HomeTechnologyTailwind CSS

Tailwind CSS in use

Tailwind CSS v4 with CSS-first configuration: tokens in the @theme block, no tailwind.config.js. The scale is closed, so a value off the scale fails to compile instead of quietly sitting next to it.

Full-stack development

Screencast · Tailwind CSS in a running application
A detail from an application running in production.

Proven by

There is no case study for Tailwind CSS here. It runs in an application that is not publicly written up.

What that means in practice

The scale is closed: spacing, type sizes and colours come out of the @theme block, and a value outside it does not compile. Two themes run on the same tokens rather than on two stylesheets. A guard script compares every spacing class in use against the scale, because Tailwind v4 otherwise turns an unknown class into no rule at all.

  • Tailwind CSS v4 with CSS Layers

  • Custom Design Tokens & Themes

  • Responsive & Mobile-First Design

  • Dark Mode Implementation

Screencast · Tailwind CSS in a running project
In operation, recorded in a running project.
Screenshot · the Tailwind CSS setting you only learn after the first deploy
The setting you only learn after the first deploy.
Screenshot · the error Tailwind CSS produces the first time
The error the first time round — and what fixes it.

Other technologies

Contact

Half a minute, and you know more.

Half a minute on what I work on and how. If a question is left, write to me — an answer within one working day.