Skip to main content
Code & Tokens

Tailwind defaults to brand theme

Developer

Overview

Write a Tailwind v4 @theme file straight from the live site, containing the brand's observed values instead of Tailwind's generic defaults.

Tailwind ships with a generic color palette, type scale, and spacing system. Most projects start with these defaults and gradually accumulate arbitrary values to match the actual brand. `--tailwind` writes a Tailwind v4 `@theme` CSS file directly, containing only the values observed on the page, so no agent step and no hand-transcription sits between the measurement and the theme. Point it at your CSS entry point to write it into the project, or let it default to output/<domain>/theme.css and review it first. An agent is still useful afterwards, for the part measurement cannot do: deciding which observed color deserves the name primary and which is incidental.

Write the theme file

Terminal
dembrandt example.com --tailwind

Or straight into the project

Terminal
dembrandt example.com --tailwind src/app.css
theme.css
@import "tailwindcss";
@theme {
--color-primary: #ea580c;
--text-display: 96px;
...
}
Claude Code prompt (optional, for semantic naming)
# With theme.css in context:
"Rename these observed values to semantic roles
(primary, accent, surface, muted) and drop the ones
that are incidental rather than part of the system."
Output

A Tailwind v4 @theme block with brand-accurate color, type, spacing, and radius scales.

Browse all

All recipes →

60 workflows