Snowpack is a tool for building web applications with less tooling and 10x faster iteration. Tailwind CSS is a utility-first CSS framework for rapidly building custom designs. Let's explore how to combine both of them. Svelte is a radical new approach to building user interfaces.

This article talks about how to use them in combination. This will also interest you if you want to add svelte-preprocess when using a Snowpack app.

Premade template is available on Github. You can use the template with command:

Snowpack provides an official template for svelte that can be initialised with:

Template Source

If you wanted to add PostCSS to your Svelte application, svelte-preprocess would probably be the plugin you think of. It functions as an automatic processor for PostCSS, SCSS, Less and a lot more.

But since we are using Snowpack's custom plugin, none of the usual loaders would work. Luckily, snowpack plugin has a secret hatch to push in plugins. It's a config file named svelte.config.js. You can create one in your root folder and export your pre-processor.

To add svelte-preprocess, you would need to install it with:

Modify the svelte-config.js with:

As suggested on Tailwind docs, we will use Tailwind CSS with PostCSS. To add this to preprocess:

Tailwind is available as a PostCSS plugin, you can add it with:

After installing tailwindcss package ofcourse.

and you are good to go. You can find the complete template on Github:

https://github.com/agneym/svelte-tailwind-snowpack

It is also listed on the page for community templates on Snowpack website.

Have Fun 🎉