Tailwind CSS Helper
<p>To transform theme values(etc. color, text) to tailwind class in json format. </p><p><br></p><p>Github repo:</p><p>https://github.com/15077693d/Tailwind-CSS-Helper</p><p>Output example:</p><p><code>{</code></p><p><code> "colorStyles": {</code></p><p><code> "Blue": "#2c7dfa",</code></p><p><code> "BlueShade": "#3685ff" </code></p><p><code> },</code></p><p><code> "fontStyles": {</code></p><p><code> "Heading": "font-Outfit font-[700] text-[22px] leading-[27px] tracking-[0px] ",</code></p><p><code> "Body": "font-Outfit font-[400] text-[15px] tracking-[10.100000381469727px] "</code></p><p><code> }</code></p><p><code>}</code></p>
Plugin Preview
About this plugin
To transform theme values(etc. color, text) to tailwind class in json format.
Github repo:
https://github.com/15077693d/Tailwind-CSS-Helper
Output example:
{
"colorStyles": {
"Blue": "#2c7dfa",
"BlueShade": "#3685ff"
},
"fontStyles": {
"Heading": "font-Outfit font-[700] text-[22px] leading-[27px] tracking-[0px] ",
"Body": "font-Outfit font-[400] text-[15px] tracking-[10.100000381469727px] "
}
}
Plugin Details
| Version | 2 |
|---|---|
| Created | October 8, 2022 |
| Last Updated | October 8, 2022 |
| Category | Software development |
| Creator | Oscar Yiu |
| Stats | 77 installs, 12 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:ui.html
- main: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.