This version was released on April 17, 2025.
We've just released our new Tailwind CSS Exporter for Supernova that makes it much easier to turn your design tokens into Tailwind code. No more manual conversions or out-of-sync styles.
Ready for Tailwind 4
We've built the exporter to fully support Tailwind 4's new CSS-based configuration, making it a perfect companion if you're planning that upgrade.
The exporter works with all your Tailwind-compatible tokens:
- Color tokens transform into Tailwind color palettes
- Typography variables becomes both CSS custom properties and component classes
- Spacing, border radius, and shadows map directly to Tailwind utilities
When you update a variable or style in Figma, that change will flow through to your saved configuration on the next export — no manual updates required.
Works the way you need
We've made the exporter flexible to fit different workflows:
- Generate one file or separate files by token type
- Choose your preferred color format (default is OKLCH as in Tailwind)
- Remove default Tailwind rules which you don't need
- … and many more options!
Our exporter also includes various options for adjusting what gets generated. You can use find/replace options to smoothly bridge the gap between variable names in Figma and what Tailwind needs to work.
Theming built in
Need light mode, dark mode, or multiple brands? The exporter generates themed CSS variables that you can apply with a simple class name.
Connect docs and code with write-back
The Tailwind exporter can automatically write generated CSS variable names and Tailwind classnames back to your tokens as custom properties. This creates a two-way connection between your design system and code implementation:
- Designers can see exactly which Tailwind classes correspond to their tokens
- Developers can quickly find which design tokens are linked to specific CSS variables
- Documentation stays in sync with actual implementation values
The Tailwind CSS Exporter is available now in your Supernova workspace. Check it out in the Code automation section and let us know what you think!
For a list of smaller improvements and bug fixes, visit our Bug fixes page here: