Importing Custom Tailwind Config

You can now import your custom Tailwind config files and use your predefined design tokens in your web-based projects.

How to Import

There are 3 ways to import your custom Tailwind config file:

Import when creating a new project

1. In the Locofy plugin, click on the project dropdown
2. Select “Create New” at the bottom
3. Select a web framework
4. Under the “Styling” section, select “Tailwind”.
5. Click on “Import Tailwind Config”
6. A text box will appear, paste your tailwind.config.js code inside.
7. Continue creating your project and Locofy your design to see your design tokens reflected in the generated code

Import after Locofying a design

1. After Locofying your design, you’ll see the generated code at the bottom of the Locofy plugin
2. At the top right of the code panel, click on the settings (gear icon) to open the code settings
3. Under the “Styling” section, select “Tailwind”
4. Click on “Import Tailwind Config”
5. A text box will appear, paste your tailwind.config.js code inside
6. You’ll see that the generated code instantly reflects your predefined design tokens.

Import in the Locofy Builder

1. After syncing to Locofy Builder, you’ll see the generated code at the bottom of the Locofy plugin
2. At the top right of the code panel, click on the settings (gear icon) to open the code settings
3. Under the “Styling” section, select “Tailwind”
4. Click on “Import Tailwind Config”
5. A text box will appear, paste your tailwind.config.js code inside
6. You’ll see that the generated code instantly reflects your predefined design tokens

Using design tokens vs arbitrary values

If you decide not to use a custom Tailwind config, LocoAI will automatically convert your most used Figma styles into design tokens by default.

To use arbitrary values in the generated code instead, you can uncheck the “Design Tokens” option.