Convert your Figma designs directly into Tailwindcss theme configurations. This plugin generates tailwind.config.js theme based on your design's styles, including support for multi-mode color variables and fonts.
- Multi-Mode Color Variables: includes color variants for each mode
- Color Styles
- Font Styles: creates fontFamily entry for each font used in design file
- Download: Clone or download the plugin repository.
git clone https://github.com/raswonders/figma-to-tailwind-theme- Install Dependencies: Navigate to the plugin directory and install dependencies.
cd figma-to-tailwind-theme
npm install- Run the Plugin: Start the plugin within Figma Desktop App.
- Open Figma and go to Plugins > Development > Create New Plugin.
- Choose the manifest.json file from the cloned repository.
- Start using the plugin from the Figma toolbar.
-
Open Figma: Launch Figma and open your design file.
-
Run Plugin: Navigate to Plugins > Tailwind Theme Gen > Run
Contributions are welcome! Please submit issues or pull requests for any improvements or bug fixes.
This project is licensed under the MIT License - see the LICENSE file for details.
This plugin is developed independently and is not affiliated with or endorsed by Tailwindcss. Tailwindcss is a separate and registered trademark of its respective owners.