https://github.com/ecklf/tailwindcss-figma-plugin

Figma Plugin for Tailwind CSS
https://github.com/ecklf/tailwindcss-figma-plugin

figma plugin tailwindcss

Last synced: 30 days ago
JSON representation

Figma Plugin for Tailwind CSS

• Host: GitHub
• URL: https://github.com/ecklf/tailwindcss-figma-plugin
• Owner: ecklf
• License: mit
• Archived: true
• Created: 2019-08-01T18:01:15.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T04:27:08.000Z (almost 2 years ago)
• Last Synced: 2024-05-18T17:48:54.806Z (9 months ago)
• Topics: figma, plugin, tailwindcss
• Language: TypeScript
• Homepage: https://www.figma.com/community/plugin/738806869514947558/Tailwind-CSS
• Size: 2.36 MB
• Stars: 268
• Watchers: 6
• Forks: 16
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - ecklf/tailwindcss-figma-plugin - Figma Plugin for Tailwind CSS (TypeScript)
• awesome-list - tailwindcss-figma-plugin

README

        
# Tailwind CSS Figma Plugin 

![Figma Plugin CI](https://github.com/impulse/tailwindcss-figma-plugin/workflows/Figma%20Plugin%20CI/badge.svg) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/impulse/tailwindcss-figma-plugin/blob/master/LICENSE) ![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)

[![All Contributors](https://img.shields.io/badge/all_contributors-2-orange.svg?style=flat-square)](#contributors-)

Making your life with Tailwind CSS and Figma easier.

![plugin banner](./images/banner.png)

## Usage

1. Generate a resolved TailwindCSS config (make sure dependencies are installed)

   ```sh

   $ cd yourtailwindproject/

   $ npx tailwind.json

   ```

2. Drag the generated `tailwind.json` in the plugin.

3. Done!

## Setup

This Plugin will only work when running within Figma since it relies on its API.

Go to the Plugins tab and add this projects `manifest.json`. For more info read the [Figma docs](https://www.figma.com/plugin-docs/intro/)

1. Then, install your dependencies:

   ```sh

   $ yarn install

   ```

2. The config offers either a dev or build script

   ```sh

   $ yarn dev

   $ yarn build

   ```

## Hot Reloading (macOS only)

Not the smoothest experience, but way better than needing to press a hotkey. In case you use the Figma Beta change App name in `applescript.sh`.

```sh

  $ brew install modd

  $ cd tailwindcss-figma-plugin/

  $ modd

```

## License

MIT

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
KA95DEV
💻

    
Roberto Leinardi
🤔 💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!