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 | 76 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 - 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.