Tailwind Color Palettes - TailwindCSS Import & Export

About this plugin

This plugin will add Tailwind Color Styles to your Figma file. You can choose between the available presets.

Features:

1. You can select the following presets from the dropdown - Tailwind v4, Tailwind v3, Tailwind v2, Tailwind v1 and Tailwind UI (deprecated)
2. In addition you can generate a custom file using the tailwind.config.js file content using this file generator
3. You can import the palette that you've create tailwind.ink using the generator and custom file upload feature
4. Export the local color styles as CSS/JSON with RGB/HSL/OKLCH support.

Note:

There could be minute differences in the color values. For example oklch(0.637 0.237 25.331) becomes oklch(63.79% 0.2373 25.44deg) in the plugin. This happens due to the conversion from tailwind color to Figma color and Figma color to tailwind config color in the "export" feature.

So the values are slightly off in the "export" feature. I will try to improve it.

If you enjoy this plugin, please follow me on twitter.

Thanks!