Tailwind Color Palettes - TailwindCSS Import & Export

形状和颜色 · 536 likes

Add TailwindCSS colors to your figma file in few clicks

This plugin will add Tailwind Color Styles to your Figma file. You can choose between the available presets. Features: You can select the following presets from the dropdown - Tailwind v4 , Tailwind v3 , Tailwind v2 , Tailwind v1 and Tailwind UI (deprecated) In addition you can generate a custom file using the tailwind.config.js file content using this file generator You can import the palette that you've create tailwind.ink using the generator and custom file upload feature 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!

适用场景

Tailwind Color Palettes - TailwindCSS Import & Export 属于 形状和颜色 分类,适合希望用清晰结果驱动设计流程的团队。

关键信息

发布者信息

创建者:Varun。Figma 社区发布者:Varun。

兼容性与支持

安装前如何评估

查看 Figma 内最新更新说明,确认示例输出质量,并与下方相关插件做对比。

在 Figma 中打开

相关插件