https://github.com/imranbarbhuiya/figma-tailwindcss

A figma plugin to convert css to tailwind class
https://github.com/imranbarbhuiya/figma-tailwindcss

codegen devmode figma tailwind

Last synced: about 4 hours ago
JSON representation

A figma plugin to convert css to tailwind class

• Host: GitHub
• URL: https://github.com/imranbarbhuiya/figma-tailwindcss
• Owner: imranbarbhuiya
• Created: 2023-10-14T12:52:58.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-06T20:36:48.000Z (3 months ago)
• Last Synced: 2024-08-07T19:07:54.625Z (3 months ago)
• Topics: codegen, devmode, figma, tailwind
• Language: TypeScript
• Homepage: https://www.figma.com/community/plugin/1295012016362159423/css-tailwind-codegen
• Size: 2.8 MB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tailwindcss codegen

This plugin generates tailwind class names in Figma's dev mode.

No login or other AI stuff.

[Try it today](https://www.figma.com/community/plugin/1295012016362159423)

![image](https://github.com/imranbarbhuiya/figma-tailwindcss/assets/74945038/7b1040bf-fd68-49e4-b3a4-a2384453385d)

## How to use

1. Toggle the dev mode in Figma

2. Go to plugins 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

    - Click on Inspect Settings and select Ignore Fields

    - ![alt text](.github/image.png)

    - Type the property name you want to ignore

    - ![alt text](.github/image-1.png)

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

    - ![alt text](.github/image-2.png)

    - Click Save and done