Tailwind Theme Preview
Pick your brand colors and fonts, watch a live CRM adopt them instantly, and copy a Tailwind v4 @theme block or DTCG-compatible JSON tokens straight into your project.
Brand
Good morning, Morgan
Here's what's moving in your pipeline today.
Pipeline value
Deals won (MTD)
Win rate
Contacts
4 shown| Name | Value |
|---|---|
Lena Rivera Northwind Labs | $48,200 |
Marcus Oduya Orbital Studio | $121,500 |
Priya Desai Helix Foods | $17,800 |
Jonas Weber Briar & Bramble | $63,400 |
Deal pipeline
Activity
- Sent proposal to Northwind Labs12m
- Closing call scheduled with Orbital Studio1h
- Added new contact at Helix Foods3h
/* Generated by thefrontkit Tailwind Theme Preview */
@theme {
/* Brand — Primary */
--color-primary-50: #f2f2fc;
--color-primary-100: #e1e2f9;
--color-primary-200: #c3c4f3;
--color-primary-300: #9d9eec;
--color-primary-400: #5154f0;
--color-primary-500: #1418eb;
--color-primary-600: #1013bc;
--color-primary-700: #0d109b;
--color-primary-800: #16176f;
--color-primary-900: #111255;
--color-primary-950: #0a0b33;
/* Brand — Accent */
--color-accent-50: #fdf9f2;
--color-accent-100: #faf1e0;
--color-accent-200: #f6e2c1;
--color-accent-300: #f0d099;
--color-accent-400: #f7b84a;
--color-accent-500: #f59f0a;
--color-accent-600: #c47f08;
--color-accent-700: #a26907;
--color-accent-800: #734f12;
--color-accent-900: #593d0d;
--color-accent-950: #352508;
/* Neutral */
--color-neutral-50: #f6f7f8;
--color-neutral-100: #ebedef;
--color-neutral-200: #d7dbe0;
--color-neutral-300: #bdc3cc;
--color-neutral-400: #929eb0;
--color-neutral-500: #6b7c94;
--color-neutral-600: #566376;
--color-neutral-700: #475262;
--color-neutral-800: #3a414b;
--color-neutral-900: #2c323a;
--color-neutral-950: #1b1e23;
/* Typography */
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
--font-heading: "DM Sans", "Inter", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}How it works
1. Enter your brand
Paste a hex or pick colors for primary, accent, and neutral. Choose heading, body, and mono fonts from the curated Google Fonts list.
2. See the live CRM
A realistic CRM dashboard — sidebar, KPIs, contacts table, pipeline, activity feed — rebrands in real time. Toggle light or dark mode to sanity-check both.
3. Export your tokens
Copy or download a Tailwind v4 @theme block, or grab a DTCG-compatible JSON file that plugs straight into Style Dictionary.
100% client-side. Your brand colors never leave your browser.
Frequently Asked Questions
Common questions about Tailwind v4 themes, design tokens, and this preview tool.
Tailwind CSS v4 introduced a CSS-first configuration model. Instead of editing tailwind.config.js, you declare your design tokens inside a @theme { … } block in your CSS. Tailwind reads those custom properties and generates matching utility classes — so --color-primary-500: #6366f1; creates bg-primary-500, text-primary-500, border-primary-500, and so on.
The JSON export follows the Design Tokens Community Group (DTCG) format — the emerging W3C-draft standard for design token files. Each token has a $value and a $type, so it plugs directly into Style Dictionary, Tokens Studio, Supernova, and most modern design-to-code pipelines without any reshaping.
We convert your hex to HSL, keep the hue, and walk through eleven lightness targets (97, 93, 86, 77, 63, 50, 40, 33, 26, 20, 12). Saturation follows a gentle curve — full saturation around the 400-600 mid-range and dialed back slightly at the extremes to keep the lightest and darkest shades from looking washed out or muddy.
The dropdowns list a curated set of popular Google Fonts (Inter, DM Sans, Work Sans, Plus Jakarta Sans, IBM Plex Sans, Playfair Display, Fraunces, Space Grotesk, JetBrains Mono, Fira Code, IBM Plex Mono, and more). If you want a different font, paste its name — the exported @theme and JSON tokens will still reference it, you'll just need to load it yourself in your own project.
Yes. For v3, grab the JSON tokens and feed them through Style Dictionary to generate a tailwind.config.js colors block, or copy the hex values directly from the @theme output and paste them into theme.extend.colors in your existing config. The generated scales are standard 50-950 Tailwind shades, so they drop in without rewrites.
No. Everything — color conversion, shade generation, export formatting, downloads — runs entirely in your browser. Nothing is uploaded, logged, or stored. Close the tab and your inputs are gone.
Why preview Tailwind themes before you code?
A brand color on its own tells you very little. The 600 shade you picked for buttons lives alongside hovers, borders, focus rings, soft backgrounds, dark mode surfaces, and headings set in a completely different font. The only way to know whether the combination works is to see it in context — which usually means scaffolding a project, wiring Tailwind, and throwing together a dashboard. That's 30 minutes of work for a five-second decision.
This tool collapses that loop. Pick your colors, swap fonts, flip between light and dark, and watch a realistic CRM dashboard react instantly. When you land on something you like, copy a Tailwind v4 @theme block or download DTCG-compatible design tokens and drop them into your real project.
What you'll get
- Full 50-950 shade scales for primary, accent, and neutral — 33 colors total.
- Font stacks for heading, body, and mono with sensible fallbacks.
- A Tailwind v4
@themeblock ready to paste into your CSS. - A DTCG-compatible JSON file for Style Dictionary, Tokens Studio, or Supernova.
- Light and dark mode surfaces derived automatically from your neutral shade.
Ship branded UIs faster
Our starter kits already use the same Tailwind v4 @theme pattern. Drop your tokens in and you're done.