0
100
200
300
400
500
600
700
800
900
1000
1100
0
100
200
300
400
500
600
700
800
900
1000
1100
Figma plugin#9 in Developers

Tailwind Color Palettes

Add TailwindCSS colors to your figma file in few clicks

by Varun

users
65K
likes
1.9K
saves
14K
comments
17
Open in Figma
FreeWorks inFigma BuzzFigma DesignDev ModeFigma SlidesFigJam
Price
Free
Latest version
v29 · Jan 7, 2026
First published
Jun 14, 2020
Publisher
Varun
On this page
Overview

About Tailwind Color Palettes

Tailwind Color Palettes is a free Figma plugin published by Varun in 2020. It works in Figma Buzz, Figma Design, Dev Mode, Figma Slides and FigJam and has 65,246 users and 1,859 likes on the Figma Community. It ranks #9 in Developers and #20 in Color Palettes on our lists.

In the developer's words

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!

Changelog

What's new

Version 29 · released Jan 7, 2026

The developer didn't publish release notes for this version.

Trust

Permissions and privacy

Network access

Tailwind Color Palettes's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data.

  • *

Extra permissions

  • Reads your Figma name and avatar

Read from the plugin's published manifest. Questions about data handling go to the developer's support page.

Rankings

Where Tailwind Color Palettes ranks

Compare

Tailwind Color Palettes alternatives

  1. 1

    Tokens Studio for Figma

    by Jan Six

    369K users7.6KFree + paid features

    The scalable design tokens solution for Figma

    View details
  2. 2

    Zeplin

    by Zeplin Crew

    293K users2.9KFree + paid features

    Design tools are for designing. Zeplin is for clear, structured design delivery.

    View details
  3. 3

    DesignDoc [Spectral]

    by Marka Plugin Dev

    141K users3.2KFree

    📐 Effortlessly hand off your Figma designs to the development team

    View details
  4. 4

    Inspect Styles

    by max.denaro

    139K users4KFree

    Inspect styles from Figma and transform to CSS

    View details
  5. 5

    Figma Exporter

    by JerryKhw

    117K users516Free

    Easily export assets as PNG/JPG/WebP/SVG/PDF for Web, Android, Flutter, iOS, React Native

    View details
  6. 6

    Tailwind CSS Color Generator

    by Erik de Vries

    112K users3.7KFree

    Create custom Tailwind CSS color scales based on a given Hex code or HSL color

    View details
FAQ

Tailwind Color Palettes FAQ

What does Tailwind Color Palettes do?

Add TailwindCSS colors to your figma file in few clicks. It's a Figma plugin by Varun that runs in Figma Buzz, Figma Design, Dev Mode, Figma Slides and FigJam.

Is Tailwind Color Palettes free?

Yes. Tailwind Color Palettes is free to install and run from the Figma Community, with no paid tier listed.

Is Tailwind Color Palettes safe to use?

Figma plugins can only reach the internet through domains listed in their manifest. Tailwind Color Palettes's manifest allows network access to any domain ("*"), so Figma doesn't limit where it can send data. As with any plugin, check the developer's privacy policy before using it on client work.

How do I install Tailwind Color Palettes?

Open it on the Figma Community, or search for it in the Actions menu (Cmd/Ctrl + K) inside any file you can edit. See how to install Figma plugins.

What are the best alternatives to Tailwind Color Palettes?

By user count, the closest alternatives are Tokens Studio for Figma, Zeplin and [DesignDoc [Spectral]](/plugins/designdoc-spectral-measures-annotations-and-handoff/). Compare all of them on the best Figma plugins for developers.

For developers

Built this plugin?

Use this page as a landing page for Tailwind Color Palettes: link to it from your site, README or launch posts, or add a badge. Pick a style and copy the code.

Tailwind Color Palettes on figmaplugins.co

Style

Label

Size

Code

<a href="https://figmaplugins.co/plugins/tailwind-color-palettes/" target="_blank" rel="noopener"><img src="https://figmaplugins.co/badges/featured-dark.svg" alt="Tailwind Color Palettes on figmaplugins.co" width="220" height="48"></a>