https://github.com/connorwforsyth/figma-tokens-tailwind

https://github.com/connorwforsyth/figma-tokens-tailwind

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/connorwforsyth/figma-tokens-tailwind
• Owner: connorwforsyth
• License: mit
• Created: 2023-02-15T10:51:07.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-15T10:51:11.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T04:39:41.705Z (3 months ago)
• Language: CSS
• Size: 48.8 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# figma-tokens-example-tailwindcss

This example illustrates how you can transform your tokens stored on Figma Tokens (with GitHub sync enabled) to be automatically transformed with token-transformer and Style Dictionary to a TailwindCSS environment with multiple themes. The theme switcher itself just adds `light-theme` or `dark-theme` to the root class, so in theory you could have not only light or dark theme but many different themes.

Change your tokens in `tokens.json` (either directly or with the Figma Tokens plugin in Figma). The GitHub action will automatically generate tokens to the `tokens/` directory that can then be read by Style Dictionary, which will output tokens to the format you defined in `build.js` - css variables will be generated in the `output` directory which Tailwind will pick up and generate utility classes.

Note: Ideally generated css/dist files wouldn't be part of the repository but rather live in the build environment. I only included them here for showcase.