Tailwind Color Variable Importer
Import Tailwind CSS v4.1 colors as Figma Variables in one click.
Plugin Preview
About this plugin
Instantly import the latest Tailwind CSS default color palette into your Figma file as Variables.
How it works
- Pick the color groups you need (Slate, Blue, Rose, etc.)
- Click "Import to Variables"
- A 'Base Color' collection is created with all selected colors as grouped variables (e.g. Blue/500, Rose/300)
Features
- All 22 Tailwind color groups with 11 shades each (50–950)
- Colors sourced directly from Tailwind CSS v4.1 (oklch converted to accurate hex)
- Select All / Clear All for quick selection
- Duplicate detection — warns you before overwriting an existing collection
- Zero config, no setup, just click and go
Perfect for designers working with Tailwind-based design systems who want consistent color tokens between Figma and code.
Plugin Details
| Version | 1 |
|---|---|
| Created | February 3, 2026 |
| Last Updated | February 3, 2026 |
| Category | Import & export plugins |
| Creator | Sei |
| Stats | 2 installs, 9 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML