Tailwind Figma Setup Wizard

About this plugin

Build a structured, scalable design system in Figma using embedded Tailwind CSS v4.3.3 data—without external dependencies, telemetry, or network requests.Key features:• Unified Light and Dark theme modes• Six configurable color roles: - Neutral - Brand - Warning - Danger - Success - Info• 13 component Visual Recipes: - Solid - Solid Strong - Soft - Soft Accent - Soft Outline - Soft Accent Outline - Ghost - Ghost Strong - Plain - Plain Strong - Outline - Outline Strong - Outline Contrast• Six interaction states for component Background and Content: - Default - Hover - Active - Pressed - Focus Visible - Disabled• Shared design tokens for: - Backgrounds - Text and icon content - Surfaces - Overlays - Borders - Focus rings - Disabled opacity• Tailwind color primitives with optional literal Light/Dark color pairs• Configurable typography system: - LTR and RTL font families - Sans, Serif, and Mono support - 14 text sizes - Nine font weights - Up to 378 generated Text Styles• Spacing and sizing variables based on the Tailwind scale• Border Radius variables• Effect variables and styles• Breakpoint and container variables• Logical padding for LTR and RTL layouts• Apply Direction and Color Theme modes directly to a selection• Convert numeral characters between Persian and Latin while preserving text formatting• Replace supported component Visual Recipes: - Change Color while preserving Recipe - Change Recipe while preserving Color - Change both Color and Recipe - Preserve supported variable bindings - Update compatible component names• Generate component variations: - Duplicate a target Recipe - Create missing Recipe siblings - Preserve Component Set structure and Variant names• Arrange Components and Component Sets: - Preserve existing rows and columns - Horizontal or vertical arrangement - Independent Component and Variant gaps - Equal or preserved Component Set padding - Automatic resize to fit• Local design-system inspection tools: - Build Preview - System Audit - Repair - Library Readiness - Selection Accessibility - Contrast reporting• Export generated tokens as JSON or CSS• Import and export portable setup presets• Incremental V3 updates: - Preserve compatible variable and style IDs - Update existing resources in place - Skip unchanged sections - Remove only obsolete plugin-managed color outputs when safe• Includes creator contact information and an optional project-support sectionPrivacy and reliability:• Runs locally inside Figma• No network requests• No telemetry• No external runtime dependencies• Does not connect to wallets or process paymentsTailwind Figma Setup Wizard is especially suited to new Figma files that need a consistent Tailwind-based foundation for colors, typography, spacing, components, Light/Dark modes, and RTL/LTR design.