Configuring different CSS styling options
Learn how to use different CSS Styling options for code exports.
In this guide, we will be using Tailwind CSS as an example.
Creating a new project that uses Tailwind CSS
When creating a new Web project, you’ll need to set up your framework settings. Select Tailwind CSS as your styling options and click “Create” to continue
![](/docs/tailwind-css/tailwind1.png)
Switching to other CSS styling options for an existing Web project
If you have an existing Web project, you can edit your Code settings in multiple locations:
- Before syncing your designs to view code in Builder, click the gear icon to edit Code settings
![](/docs/rectangle-29815@2x.png)
- In Locofy Builder, click the gear icon in the code panel to view and edit Code settings
![](/docs/tailwind-css/tailwind2.png)
- On the Locofy dashboard (opens in a new tab), head to project settings and click the “Code Generation” tab to view and edit Code settings
![](/docs/tailwind-css/tailwind3.png)
View code for your CSS project
Sync your designs to Locofy Builder using the Locofy Plugin. In the code panels, you can view your generated CSS files.
![](/docs/image-7550@2x.png)