Tailwind defaults to brand theme
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
Or straight into the project
A Tailwind v4 @theme block with brand-accurate color, type, spacing, and radius scales.
More in Code & Tokens
Browse all
All recipes →
Continue reading
Getting started
Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.
MCP
Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.
Skills
30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.