Tailwind CSS
The rulebook that keeps every page on the same system.
- ON THIS BUILD
- USED ON THIS BUILD
- WHERE IT RUNS
- Styling · Tailwind 4 · CSS-first tokens
- OFFICIAL DOCS
- Read the reference →
What it is
The styling layer of every build: one type scale, one spacing rhythm, one colour set, checked for AAA contrast. Pages don't drift because the rules they inherit are written down once and applied everywhere.
What it does for your business
For your business it means the site still looks coherent in year three — every page added later speaks the same visual language, and a future developer reads the same rulebook you handed over.
Why it earns its place
One type scale, one spacing rhythm and one colour set are what keep a site coherent as it grows. A utility layer is only useful if it enforces that system instead of escaping it.
The styling layer of this site — one type scale, one spacing rhythm, one colour set, enforced by a build-time gate that fails on sub-13px type and low-contrast copy.
One system, checked
Version
4.3Config
@theme in globals.cssProcessor
@tailwindcss/postcssType floor
13px, gatedThe design audit reads the rendered result, not the class names. A token that passes in source can still fail contrast on a background.
How it runs here
Tailwind 4 runs through `@tailwindcss/postcss` and the theme lives in `app/globals.css` with `@theme`. Components consume tokens such as `--color-basalt` and `--color-amber`; the audit fails on sub-13px type and low contrast.
THE THEME IS THE SYSTEM
CSS@import "tailwindcss"; @theme { --color-basalt: #0a0a09; --color-amber: #D6A87C; --text-body: 16.5px;}When it runs
Every component. A new colour or size is a token change, not a one-off class buried in a section.
Who owns it
Design owns the tokens. Build consumes them. QA measures the result.
What it does not claim
Tailwind does not make a page designed. The tokens and the audit do that; the utility classes only make the system cheap to apply.
THE REFERENCE
The manual above is ours. The vendor's reference is the place to check an API, a version or a limit.
Open the official docs →This is the tool. The process is what turns it into your business.
File the brief