Hey everyone! I’m curious about integrating Tailwind CSS into my Figma workflow. Has anyone managed to get this working properly?
I know you can export color palettes from Figma and bring them into your tailwind.config.js file, but I’m more interested in the utility classes themselves. Can you somehow use Tailwind’s spacing, typography, and layout utilities directly in Figma?
I’m specifically working with Tailwind version 1, so any solutions need to be compatible with that older version. Would love to see some real examples if anyone has this setup running.
Thanks in advance for any help or insights you can share!
I’ve used Tailwind v1 for ages - there’s no direct Figma integration with Tailwind’s spacing or typography classes. Here’s what worked for me: I built a custom spacing scale in Figma matching Tailwind’s defaults (4px, 8px, 16px, etc). Did the same thing with typography - manually created text styles that match Tailwind’s font sizes and line heights. Takes some setup work upfront, but your designs translate to code way smoother after that. The trick is actually sticking to those values instead of eyeballing everything. Handoffs become super clean since everything already matches what developers will code.
I create a shared Figma doc that mirrors my Tailwind v1 config - breakpoints, colors, shadows, border radius, everything. It’s my single source of truth for both design and dev. Don’t try to force integration. Just treat Figma as a visual representation of your Tailwind system. When I’m designing, I constantly check this doc to make sure I’m using actual Tailwind values. Takes discipline but kills the guesswork during dev. Handoffs get way more precise when you can say ‘use text-lg with leading-relaxed’ instead of throwing around random pixel values.