Tailwind Design Tokens

Tailwind Design Tokens is a Visual Studio Code extension that lets you preview your design token colors directly in CSS, SCSS, and PostCSS files. Perfect for Tailwind projects using CSS variables (--primary, --background, etc.) instead of utility classes like bg-blue-500.

🚀 Features

• Show HSL colors next to your tokens (e.g., --background: 230 25% 8%).
• Color swatches appear on the right for easy visual reference.
• Compatible with Tailwind CSS v4+ and any CSS variable-based design token setup.
• Works with background, text, and button tokens (like --filter-button).
• Auto-detects tokens in :root—no additional setup required.

💻 Installation

1. Open VS Code.
2. Go to the Extensions panel and search for Tailwind Design Tokens.
3. Install the extension.
4. Open any .css, .scss, or .postcss file with your design tokens.
5. Color swatches will appear automatically to the right of each token value.

⚡ Example Usage

:root {
  --background: 230 25% 8%;
  --foreground: 210 40% 98%;
  --primary: 45 100% 51%;
  --filter-button: 0 0% 0%;
}

/* Connect tokens to Tailwind v4 */
@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-filter-button: hsl(var(--filter-button));
}

body {
  @apply bg-background text-foreground;
}

🖼️ Screenshots

📦 Notes

• Works with CSS variables only; does not apply to Tailwind utility classes directly.
• Designed for Tailwind projects and custom design token setups.
• Swatches are shown next to the value for quick reference.