Tailwind Sync

About this plugin

Tailwind Sync is a tool box that bridges Figma variables and Tailwind code, streamlining the collaboration between designers and developers, from simple projects to design systems.

Features

1. Plug and play: Simply drag and drop the file into your code editor and start coding with the exact same theme as in Figma.
2. Variables, not values: Tailwind Sync outputs variables instead of hardcoded values, perfect for complex, scalable design systems in enterprise environments.
3. Built-in changelog: Automatically tracks and documents changes to variables and text styles, ensuring easy versioning and clear communication with a shared language across design & development teams
4. Tailwind scoping: Ensures Tailwind scoping matches Figma’s, guiding developers to use values consistently, and maintain design integrity.

Tips for Using the Plugin

1. Ignore Design-Only Folders: If your variable path includes design-specific organizational folders, place them between parenthesis (e.g., (folder)). The plugin will ignore these.
2. Text Styles Exclusion: Aside from font-families, the plugin does not take text style-attached variables into account.
3. Scope Tailwind Variables: You can use Figma’s scoping feature to limit your Tailwind variables to specific properties.
4. Changelog Tokens: The tokens displayed in the changelog represent the final class that the developer will use (e.g., bg-button-primary).

For a Deeper Understanding

Check out our walkthrough videos to get started with Tailwind Sync

1. Overview: https://x.com/source_paris/status/1836378230321779145
2. First-time setup: https://x.com/source_paris/status/1837019103233520044
3. Tailwind scoping: https://x.com/source_paris/status/1838262832451981433

Enjoying this plugin?

1. Share it with your team and network
2. Upvote on ProductHunt
3. Drop a comment, we’d love to hear from you!
4. Check out our other plugin, IconDescription

About

Tailwind Sync is built by source.paris

We craft useful, durable and beautiful digital products.

Follow us on Twitter and LinkedIn