Back to Plugins

Tokens to Tailwind CSS
Generate utility classes for Tailwind CSS from local style of Figma.
tailwindcsscolorstylescode-generators
Plugin Preview
About this plugin
This plugin generates utility classes for Tailwind CSS from design tokens set in the local style of Figma.
Instructions
- Create a local styles.
- Run this plugin.
- Select some options and press generate button.
- Copy and paste the generated code into the Tailwind CSS configuration file.
*Currently only colour styles are supported.
Options
・Primitive colours
Generates the primitive styles referenced by the semantic style as CSS variables.
・Classify by keys
Classify by key if a special name is used for the first level of the style name.
Find out more:
https://github.com/K-shigehito/figma-tokens-to-tailwind#readme
Plugin Details
Version | 2 |
---|---|
Created | March 28, 2023 |
Last Updated | March 30, 2023 |
Category | Software development |
Creator | koyama shigehito |
Stats | 169 installs, 43 likes |
Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/index.html
- main:dist/code.js
- Editor Types:figma
More Like This
Discover other plugins in the Software development category.
Figma to Code (HTML, Tailwind, Flutter, SwiftUI)
Code Conversion Made Easy: Figma to Web & Apps
Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more)
Export designs to responsive code (React, HTML, Vue, Tailwind, etc) with AI
SkewDat
Skew any layer or group with all layers preserved to edit.