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

When building a project with Tailwind CSS, your config file defines your design system — but it's hard to reason about colours, spacing scales, and typography just by reading JavaScript values. This tool turns your config into a visual style guide instantly.

What gets visualised

Colours — rendered as swatches with labels
Spacing — shown as proportional bars with rem values
Font families — listed with their fallback stacks
Font sizes — rendered at their actual size
Border radius — shown as shaped boxes

Frequently Asked Questions

What does this parse?

Colors (hex/rgb/hsl), spacing, font families, font sizes, and border radius from your theme.extend or theme block.

Does it support nested palettes?

Yes — nested objects like primary: { 500: "#..." } expand into individual swatches labelled primary-500 etc.

Is my config sent to a server?

No. All parsing runs in your browser. Your config never leaves your device.

Vibe Coding tools

Tailwind Visualizer API Mock Generator Viewport Checker