Export OKLCH Design Tokens
Export your collected cart roles into production-ready Tailwind CSS v4 @theme blocks, vanilla CSS custom properties, or download as a clean stylesheet.
Using these in Tailwind v4
Anything declared in @theme as --color-* becomes a utility automatically — no config file, no plugin.
<button class="bg-primary-500 text-white hover:bg-primary-600 px-4 py-2 rounded-md">VS Code-Style Inline Color Decorators
Notice the tiny rounded color squares rendered before every color token value above. Just like in VS Code, each square displays a live preview with a 1px border and transparent checkerboard backing. These decorators are marked aria-hidden="true" and are strictly excluded from copying, ensuring your clipboard always receives pure, valid CSS code.
How to Export Design Tokens
- Collect colors: Use the color picker, palette library, or generator to add colors to your cart.
- Assign roles: Each color is assigned to a semantic role (e.g. Primary, Danger, Success). You can rename roles to match your design system.
- Choose format: Select Tailwind v4
@theme, CSS custom properties, or JSON. - Copy or download: Copy the code to your clipboard or download it as a
.cssfile.
Sample Export Output
Here is an example of what a Tailwind CSS v4 @theme block looks like when exported:
@theme {
--color-primary-50: oklch(0.965 0.015 265);
--color-primary-100: oklch(0.935 0.028 265);
--color-primary-200: oklch(0.85 0.07 265);
--color-primary-300: oklch(0.72 0.12 265);
--color-primary-400: oklch(0.60 0.17 265);
--color-primary-500: oklch(0.55 0.20 265);
--color-primary-600: oklch(0.50 0.20 265);
--color-primary-700: oklch(0.45 0.19 265);
--color-primary-800: oklch(0.38 0.15 265);
--color-primary-900: oklch(0.30 0.10 265);
--color-primary-950: oklch(0.22 0.06 265);
}This generates utilities like bg-primary-500, text-primary-700, and border-primary-300 automatically.
Tailwind CSS v4 Integration
Tailwind CSS v4 uses CSS-first configuration. Instead of a tailwind.config.js file, you define your design tokens directly in your CSS using the @theme block. Any custom property prefixed with --color- automatically becomes a set of color utilities.
For example, --color-brand-accent: oklch(0.55 0.20 265) in your @theme block generates bg-brand-accent, text-brand-accent, border-brand-accent, and all other color utilities for that token.