fig2tw - Convert variables to Tailwind, CSS or JSON

About this plugin

Convert Figma variables into a Tailwind plugin, CSS or JSON file.Key features:Tailwind configuration is inferred from the variable scopes.Configure the variable scopes in Figma to generate useful Tailwind configuration.

All variable modes are converted into CSS variables.Change the mode (light, dark, etc.) with a CSS class.Number units are configured by variable scope.Define how numbers are to converted to CSS. You can choose from px, em, rem. Font weights don't have units.Getting started:1. Download the generated Tailwind pluginDownload the tailwind plugin using the "Download" button and place the file next to your tailwind.config.ts.2. Import the generated plugin in your Tailwind configurationIn the tailwind.config.ts file, import the generated plugin and place it in the plugins array. The configuration should look like below.import fig2tw from "tailwind.fig2tw";const config = {plugins: [fig2tw],// ...}export default config;Supports:Tailwind configuration scopes:colors, fill, accentColor, backgroundColor, gradientColorStops, borderColor, stroke, ringColor, ringOffsetColor, outlineColor, textColor, textDecorationColor, caretColor, placeholderColor, boxShadowColor.spacing, size, width, minWidth, maxWidth, height, minHeight, maxHeight, margin, inset, borderRadius, padding, gap, space, scrollMargin, scrollPadding, borderSpacing, strokeWidth, outlineWidth, borderWidth, ringWidth, fontFamily, fontSize, lineHeight, letterSpacing, fontWeightFigma variables scopes:ALL_SCOPES, ALL_FILLS, FRAME_FILL, SHAPE_FILL, TEXT_FILL, STROKE_COLOR, EFFECT_COLOR, CORNER_RADIUS, WIDTH_HEIGHT, GAP, STROKE_FLOAT, FONT_SIZE, LINE_HEIGHT, LETTER_SPACING, FONT_WEIGHT, FONT_FAMILY