Importing Tailwind Configuration

To import your Tailwind configuration, follow these steps:

1. Open the FireJet plugin in Figma.
2. Navigate to the Settings page.
3. Click on the "Upload" button next to Import Tailwind styles.
4. Select your tailwind.config.js file from your project directory.
5. A confirmation dialog will popup. Make sure to scroll down to confirm and click Publish

Format for the tailwind config being uploaded

1. The filename is unimportant. It will work regardless of whether it is called tailwind.config.js tailwind.test.js or even .tailwind or some strange naming convention
2. The contents should be a .js file with a module.exports i.e. in CJS configuration.
3. Make sure to use the extends tailwind config keyword, UNLESS you want to override the base tailwind config styles. Overriding default styles will make your output very verbose, so it is not recommended.
4. FireJet works by running a eval on your script, while spoofing the value of module. Then, the exports item on the module object is read as your tailwind config.
5. DO NOT upload untrusted tailwind configs - Make sure the tailwind config uploaded was created by you.
6. FireJet supports some imports for tailwind.config (For now tailwindcss/colors and tailwindcss/defaultTheme). You are not allowed to import other files into your config.

Using the uploaded config in the generated tailwind code

The styles defined in the tailwind config will be automatically used in the output configuration. There will be no additional actions required.

Using the uploaded config as a design system in Figma

After publishing your colors, you can use them in Figma as design tokens.

You can find the uploaded design tokens in the right sidebar.