Tokens to Tailwind CSS
Generate utility classes for Tailwind CSS from local style of Figma.
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 | 177 installs, 45 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 - Figma to Code & AI Apps (React, Vue, Tailwind, etc)
Export designs to clean, responsive code or turn Figma screens into AI apps and prototypes.
SkewDat
Skew any layer or group with all layers preserved to edit.