tailwindcss

About this plugin

# Figma to Tailwind CSS v4 Theme

A Dev Mode codegen plugin that extracts Figma variables and converts them to Tailwind CSS v4 `@theme` format.

## Features

🎨 **Colors** — Automatically converted to `oklch` for better color manipulation

📏 **Spacing & Sizing** — Proper unit conversion to rem/px

🔲 **Borders** — Radius and border widths

🌑 **Shadows** — Box shadows, drop shadows, inset shadows

✍️ **Typography** — Font families, sizes, weights, line heights, letter spacing

⚡ **Motion** — Durations, easing functions, animations

📱 **Layout** — Breakpoints, containers, aspect ratios

🎯 **Utility-specific colors** — Control which utilities a color generates (bg-*, text-*, border-*)

## How It Works

Name your Figma variables with a namespace prefix like `color/primary`, `spacing/lg`, or `radius/md`. The plugin converts them to Tailwind CSS variables like `--color-primary`, `--spacing-lg`, `--radius-md`.

Tailwind v4 automatically generates utility classes from these variables—no configuration needed.