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

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 example.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.

More in Code & Tokens

Design-system-aware Cursor projectGive GitHub Copilot brand contextRefactor hardcoded colors to token variablesLegacy CSS to design tokensGenerate a shadcn/ui theme from any websiteExport design tokens to StorybookExtract design tokens for a Next.js application

Browse all

All recipes →

52 workflows

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.

Read more

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.

Read more

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.

Read more