Tailwind in Snowfire

Tailwind is a utility-based CSS framework to rapidly build modern websites without ever leaving your HTML.

We're big fans of Tailwind here at Snowfire and we use it to build lots of things. That's why we have built-in support for Tailwind in Firecode. Are you new to Tailwind? Learn more about this fantastic framework at tailwindcss.com

Get started with Tailwind in Snowfire

There is nothing to install when working with tailwind in Firecode. Go to settings.json and enable version 2. Save & reload Firecode.

{
    "tailwind": 2
}

Once you've reloaded Firecode you should be able to configure tailwind.config.js. Every time you change that file we'll compile a new tailwind.css trough our cloud environment. This might take up to 10 seconds.

Now you can start using Tailwind. Create a new block and start coding. Here is an example code you can try.

<div class="bg-blue-100 h-24 flex items-center justify-center">
     <h1 class="text-blue-400">Hello World</h1>
</div>

Tailwind in Production

To make your code ready for production it is super important to enable purge. To enable it, open your tailwind.config.js and enable it.

module.exports = {
    purge: {
        enabled: true
    },
    [..]
]

That's it! Don't forget to turn it off when continuing to develop your website.