Tailwind Type Sync

A local Figma plugin that manages native Figma Text Styles from a Tailwind-like typography token system.

Model: primitive tokens → composite typography definitions → semantic Figma Text Styles. Designers apply semantic styles (page/title, section/title, card/title, …) normally; the plugin keeps them synced with the underlying Tailwind primitives — and converts letter-spacing/line-height correctly (e.g. tracking-tighter → -5%, not -5px).

Quick start

npm install
npm run build      # outputs dist/code.js + dist/ui.html

In Figma desktop: Plugins → Development → Import plugin from manifest… → select manifest.json.

Then: edit tokens in the UI → Create missing styles → apply the styles to text → re-run Sync whenever tokens change.

Docs

Full documentation lives in docs/:

• Overview & concepts
• Token model & conversion rules
• Composite & semantic styles
• Syncing & safety model
• Architecture & build
• UI & design system
• Development guide

Stack

Vite · React · TypeScript · Tailwind v4 · shadcn/ui (base-ui). The UI bundles to a single self-contained dist/ui.html; the plugin main thread builds to an IIFE dist/code.js.