What does this tool parse?

It parses colors (hex, rgb, hsl), spacing values, font families, font sizes, and border radius values from your tailwind.config.js. It works with both theme.extend and theme blocks.

Does it support nested color palettes?

Yes. Nested color objects like primary: { 50: '#...', 500: '#...' } are expanded into individual swatches labelled primary-50, primary-500 etc.

Tailwind Config Visualizer — Style Guide from tailwind.config.js

Paste your tailwind.config.js

About the Tailwind Config Visualizer

A Tailwind CSS configuration file defines the design tokens for your project: the specific colours, spacing scale, typography sizes, and border radii that form your visual system. Rather than reading raw JavaScript values, this tool renders your config as a visual style guide — colour swatches, proportional spacing bars, font sizes rendered at their actual sizes, and shaped boxes for border radii.

What gets visualised

Colours — rendered as labelled swatches, including nested palettes expanded to individual entries
Spacing scale — shown as proportional horizontal bars with rem and px values
Font families — listed with their full fallback stacks
Font sizes — rendered at their actual pixel size so you can see the type scale visually
Border radius — shown as coloured boxes with the actual radius applied

Using this as a living style guide

Paste your tailwind.config.js before a design review or handoff. The visual output reflects your actual project tokens — no separate Figma or Storybook maintenance required. The tool handles both theme.extend (merging with defaults) and theme (overriding defaults) config blocks.

Tailwind CSS design tokens and theming

Design tokens are the named values — colours, spacing, typography, radii — that form the foundation of a consistent visual system. Tailwind's configuration file is effectively a design token system. Exporting these tokens to other formats (CSS custom properties, Style Dictionary JSON, Figma Variables) lets design and engineering work from the same source of truth.

CSS Custom Properties export — generate CSS variables from your Tailwind config for use outside of Tailwind classes
Style Dictionary — open-source tool that transforms design tokens from JSON into any output format (CSS, iOS Swift, Android XML)
Figma Variables — import colour and spacing tokens into Figma to keep design files in sync with code
Dark mode — Tailwind's dark: variant can be driven by a custom class or media query; configure this in the darkMode config option

Frequently Asked Questions

What does the Tailwind Config Visualizer show?

It parses your tailwind.config.js and renders your custom design tokens visually: colour swatches (including nested palettes), spacing scale as proportional bars, font families with fallbacks, font sizes at their actual rendered size, and border radii as shaped boxes.

Does it work with TypeScript tailwind.config.ts files?

Paste the JavaScript object content — the tool parses the config object, not the file format. If your TypeScript config exports an object, copy the contents between the config definition's curly braces. Avoid TypeScript-specific syntax like type assertions in the pasted content.

Does it support nested colour palettes?

Yes. Nested objects like primary: { 50: "#eff6ff", 500: "#3b82f6" } are expanded into individual swatches labelled primary-50, primary-500, and so on. Both quoted and unquoted key syntax are handled.

Is my config sent to a server?

No. All parsing and rendering happens in your browser. Your config file never leaves your device, making it safe to use with proprietary design systems and unreleased brand colours.

How is this different from the Tailwind documentation?

The official Tailwind docs show the default configuration. This tool shows your project's custom configuration — the overrides and extensions specific to your codebase. It is most useful when your project uses a custom colour palette, spacing scale, or typography that differs from Tailwind's defaults.

Tailwind Visualizer

About the Tailwind Config Visualizer

What gets visualised

Using this as a living style guide

Tailwind CSS design tokens and theming

Frequently Asked Questions