Ignore Tailwind palette
When using Tailwind CSS export mode, Variables Xporter provides a useful option to ignore Tailwind’s default color palette, making your exported configuration file more concise.
Why do we need this feature?
Tailwind CSS includes a rich default color palette:
- Slate
- Gray
- Zinc
- Neutral
- Stone etc…
However, in Figma, if your Figma Variables contain Tailwind CSS default color palettes and you haven’t modified them, you should ignore them. Because these default color palettes are built-in in the development environment.
Variables Xporter will only ignore Tailwind CSS default color palettes that start with color/ or colors/.
How to use
- Check the “Ignore Tailwind CSS default color palette” option in the export settings
- Variables Xporter will only export the color variables you defined in Figma
- The generated configuration file will not include Tailwind default colors
Example
Tailwind CSS V4
/* Before enabling the ignore option */
@theme {
--color-red-50: oklch(0.971 0.013 17.38);
...
--color-orange-50: oklch(0.98 0.016 73.684);
...
--color-amber-50: oklch(0.987 0.022 95.277);
...
/* Your custom colors */
--color-primary: var(--color-red-400);
}
/* After enabling the ignore option */
@theme {
/* Only includes your custom colors, no need to declare Tailwind CSS default colors again, they are built-in in the development environment */
--color-primary: var(--color-red-400);
}
Last updated on