Tailwind Design Toolkit

About this plugin

Tailwind Design Toolkit bridges the gap between Tailwind CSS v4 and Figma. Generate a complete design system from Tailwind tokens, apply styles instantly with the Quick Toolbar, snap dimensions to the nearest token, and export selected frames as HTML with Tailwind classes.What it creates:Color Variables — All 22 Tailwind palettes (slate through rose), 11 shades each, with correct scopes for fills, strokes, and effectsTypography — Font size + line height variables, text styles, and font family variables (sans, serif, mono) in one unified collectionSpacing — Full spacing scale (0-96) as number variables scoped to width, height, and gapContainers — Named max-width tokens (3xs-7xl) for layout containersBorder Radius — xs through 4xl plus none and full, scoped to corner radiusOpacity & Border Width — Complete token sets as bound variablesShadows & Blur — Box shadows, inset shadows, drop shadows, and blur as reusable Figma Effect StylesButton Components — Variant component sets per size with Default + Hover statesGrid Layouts — Desktop (1440px, 12 cols) and Mobile (375px, 4 cols) with saved Grid StylesQuick Toolbar:Font tab — Apply text styles, weights, and font families with one clickColor tab — Apply color variables as fill or stroke directly from swatchesTrim tab — Snap width, height, padding, gap, radius, opacity, border width, and shadows to the nearest Tailwind token and bind the variable automaticallyHTML tab — Live preview of selected frames as HTML with Tailwind classes, copy to clipboardSnap to Tokens (Trim):Snap single elements or all children in a frame recursivelyDirection control: nearest, round down, or round upSupports spacing, containers (max-w), radius, opacity, border width, min/max width and heightBinds the matching Figma variable so it shows in the property pickerRecognizes custom tokens you add to the variable collectionsHTML Export:Converts Figma frames to HTML with Tailwind CSS utility classesRecognizes auto-layout (flex, gap, padding), colors, typography, radius, shadows, and container widthsReads your actual Figma variables — custom tokens are includedAdjustable depth, auto-export on selection change, one-click copyKey features:Every variable gets the correct Tailwind CSS v4 code syntax for Dev Mode (e.g. --color-blue-500, --spacing, --radius-lg)Proper variable scoping — colors only show in fill/stroke pickers, spacing in width/height/gap, radius in corner radiusDynamic token recognition — custom variables you add are picked up by trim and exportOptional showcase frames that visualize your entire token setPreset buttons (Compact, Standard, Full) for fast configurationReset function to cleanly remove all generated tokensNo network access required — runs entirely offlineBuilt for Tailwind CSS v4. All token names, values, and CSS custom properties follow the official Tailwind v4 @theme specification.Release note (v0.3):New: Quick Toolbar with Font, Color, Trim, and HTML tabs. Snap to Tokens trims dimensions, radius, opacity, border width, and shadows to the nearest Tailwind token and binds the variable. HTML Export converts frames to Tailwind utility classes with dynamic token recognition. Container width support (max-w-3xs through max-w-7xl). Renamed to Tailwind Design Toolkit.---This plugin is not affiliated with or endorsed by Tailwind Labs.Tailwind CSS is an open-source project by Tailwind Labs — https://tailwindcss.comIf you use Tailwind CSS professionally, consider supporting the project: https://github.com/sponsors/tailwindlabsCategory: Design toolsSupport: [email protected]: artsunique — www.artsunique.de