Back to Plugins
Tailwind Color Palettes – Import & Export

Tailwind Color Palettes – Import & Export

Tailwind CSS colors to Figma Styles & Variables.

Plugin Preview

Tailwind Color Palettes – Import & Export preview

About this plugin

✨ The Complete Tailwind Color Sync for FigmaBridge the gap between your code and design with the most robust Tailwind CSS color utility. Whether you need the official defaults or your own custom brand colors, this plugin handles the heavy lifting across Figma Design, Dev Mode, FigJam, Slides, and Buzz.🚀 KEY FEATURESInstant Presets: One-click import for all official Tailwind versions (v1, v2, v3, and the latest v4).Styles & Variables: Import palettes as standard Paint Styles or modern Figma Variables for a powerful tokens-based workflow.Create on Canvas: Generate high-fidelity, branded color palettes directly on your canvas to share with your team.Custom Config Parser: Paste your tailwind.config.js to instantly preview and import your unique brand colors.Advanced Export: Export local styles back to JSON or CSS Variables with support for RGB, HSL, and OKLCH.Dark Mode Native: A premium, "comfort-first" UI that synchronizes perfectly with Figma’s theme.💡 HOW IT WORKSSelect your preferred Tailwind version or paste a custom config.Choose your "Import Mode" (Styles, Variables, or Canvas).Click "Import" and watch your design system come to life!

Plugin Details

Version1
CreatedMarch 20, 2026
Last UpdatedMarch 20, 2026
Categoryui-kits
CreatorPonsiva . Pandian
Stats4 installs, 1 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/index.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • https://fonts.googleapis.com
    • https://fonts.gstatic.com