Figma-tokens : example tailwindcss using css variables reference

This repository was created as part of a blogpost on the Mirahi Digital Garden.

We will explain how you can transform your tokens stored on Figma Tokens using token-transformer and Style Dictionary to css-variables with references, and use them in your TailwindCSS environment with multiple themes.

Setup

Make sure to install the dependencies:

# npm
npm install

Build all the styles files (css-variables and tailwind config)

npm run build-styles

Development Server

Start the development server on http://localhost:3000

npm run dev

Click on the toggle button "dark-light", to switch theme.

Other examples

You can find other examples here by Jan Six

Dependencies

This project uses style-dictionary, token-transformer, TailwindCSS, NuxtJS, @nuxtjs/tailwindcss, nuxt-icons

License

MIT License © 2022-PRESENT Mathieu Laurent @ Mirahi

About

Mirahi

We love open source and do our part in sharing our work with the community! See our other projects or hire our team to help build your product.