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!
What this plugin is best for
Tailwind Color Palettes - TailwindCSS Import & Export is listed in the Shapes & Colors category and is suited for teams that want practical Figma workflows with clear outcomes.
Key details
- Category: Shapes & Colors
- Likes: 536
- Users: 38,068
- Pricing model: Free
Publisher information
Created by Varun. Published by Varun on the Figma Community.
Compatibility and support
- Supported editors: design, dev_handoff, slides, whiteboard
- Published on: Nov 25, 2024
- Support contact: https://twitter.com/varundevpro
How to evaluate before installing
Check the latest update notes in Figma, review sample output quality, and compare alternatives in the related plugins section below.