Back to Plugins
css-tailwind-codegen

css-tailwind-codegen

Generated tailwind class names from the css privided by figma

tailwindcsscsshtmltailwindcodegenreactcode-generators

Plugin Preview

css-tailwind-codegen preview

About this plugin

This plugin generates tailwind CSS class names by using the CSS provided by Figma. No AI or login is needed.


The source code is available on Github


How to use


1. Toggle the dev mode in Figma

2. Go to pulgins and select css-tailwind-codegen

3. Select the layers you want to generate the class names for


Features

- Generates class names for the selected layers

- Ignore specific fields

1. Click on Inspect Settings and select Ignore Fields

2. Type the property name you want to ignore

3. You can also specify a value with the property name to only ignore this field when it has a specific value

4. Click Save and done

Plugin Details

Version8
CreatedOctober 14, 2023
Last UpdatedAugust 7, 2024
CategorySoftware development
CreatorParbez Barbhuiya
Stats302 installs, 53 likes
PricingFree

Technical Details

  • API:1.0.0
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    dev
  • Allowed Domains:
    • none
  • Codegen Languages:
    • tailwindcss(css)