figma-plugin-react-tailwind-template

Quick start your Figma plugin with React and Tailwind CSS

This template contains the react example as shown on Figma Docs, with some structural changes and extra tooling.

Quickstart

Run yarn to install dependencies.
Run yarn build:watch to start webpack in watch mode.
Open Figma -> Plugins -> Development -> Import plugin from manifest... and choose manifest.json file from this repo.

⭐ To change the UI of your plugin (the react code), start editing App.tsx.
⭐ To interact with the Figma API edit index.ts.
⭐ Read more on the Figma API Overview.

Toolings

This repo is using:

React + Webpack
Tailwind CSS
TypeScript
Prettier precommit hook

Tailwind CSS Configuration

Preflight Off: Tailwind's preflight (base styles) is turned off.
VSCode Integration: For an enhanced development experience, it's recommended to install the Tailwind CSS IntelliSense extension in Visual Studio Code. This extension provides:
- Intelligent CSS class name completion
- Hover previews
- Linting
- Syntax highlighting
To install, search for "Tailwind CSS IntelliSense" in the VSCode extensions marketplace.

For more information on using Tailwind CSS, refer to the official Tailwind CSS documentation.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License