Skip to main content
Home/Recipes/Tailwind defaults to brand theme
Code & Tokens

33.Tailwind defaults to brand theme

Developer

Overview

Extract the brand's real tokens. Generate a Tailwind theme extension that replaces generic defaults with actual brand values.

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. Extract the brand's real token set with Dembrandt, then ask an AI agent to generate a Tailwind theme extension in tailwind.config.js that maps the extracted values to semantic names (primary, accent, surface, muted) and replaces Tailwind defaults with brand-accurate colors, type scale steps, spacing values, and border radii.

Extract brand tokens

Terminal
dembrandt brand.com --save-output
Claude Code prompt
# With extraction JSON in context:
"Generate a Tailwind CSS theme extension (tailwind.config.js)
using these extracted tokens. Map brand colors to semantic
names (primary, accent, surface, muted), extract the type
scale, spacing, and border radius."
Output

tailwind.config.js with brand-accurate color, type, spacing, and radius scales.

Browse all

All recipes →

43 workflows