Figtail: Import Tailwind & Custom CSS as Figma Variables

About this plugin

🎨 Import Tailwind CSS v4 + Custom CSS design tokens

Colors, spacing, border radius, typography, shadows, as native Figma variables and styles.

Also supports custom CSS with @theme, :root, oklch, color-mix(), var() chains, and dark mode!

✨ What you get:

• Full Tailwind v4 color palettes as color variables (Dark mode support for colors out of the box)

• Spacing, sizing & border radius as number variables

• Typography styles with font family, size, weight, line height and more!

• Shadow & blur effect styles

🧩 Custom CSS support:

Paste your own CSS with @theme blocks, :root variables, or dark mode via prefers-color-scheme, FigTail resolves oklch, color-mix(), and var() chains automatically. CSS variables that reference other variables (e.g. --color-primary: var(--color-blue-500)) are imported as native Figma variable aliases, keeping your tokens connected.

🗂️ Flexible organization:

Choose to keep everything in one collection or split aliased tokens into a separate Tokens collection for cleaner variable management.

🔄 Smart merge:

Re-run anytime without duplicates. FigTail skips existing variables and only adds what's new.

Perfect for designers working with Tailwind projects who want pixel-perfect design-dev handoff.

This is an UNOFFICIAL plugin for Tailwind CSS. It is not affiliated with, endorsed by, or supported by Tailwind Labs Inc. or Figma Inc.

—

🌐 Creator

☕ Support this plugin!