Tailwind
Browse all resolved Tailwind CSS design tokens and their current values.
Last updated:
The Tailwind app fetches your project's fully-resolved Tailwind CSS configuration from the dev server and displays all design tokens — colors, spacing, typography, shadows, and more — in a searchable, grouped view.
What it shows
| Section | Contents |
|---|---|
| Colors | Every color token with a visual swatch and its hex/rgb value |
| Spacing | Spacing scale values |
| Font sizes | Text size tokens |
| Font families | Font stack values |
| Font weights | Numeric weight values |
| Line heights | Line height tokens |
| Border radius | Radius tokens |
| Box shadows | Shadow tokens |
| Opacity | Opacity scale |
How it works
The Tailwind app calls the built-in getTailwindConfig() RPC function, which reads and resolves your CSS using @tailwindcss/node on the Vite server. The resolved tokens are then rendered in the browser panel.
Only Tailwind CSS v4 is supported. The app returns null and shows a "No Tailwind config found" message when no Tailwind v4 CSS is detected.
Enabling the Tailwind app
The Tailwind app is disabled by default. Enable it in your Vite config:
devToolbar({
apps: {
tailwind: true,
},
});