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.

Template

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

npx create-snowpack-app dir-name --template @snowpack/app-template-svelte

Setup Svelte and Snowpack

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

npx create-snowpack-app dir-name --template svelte-tailwind-snowpack

Template Source

Svelte Preprocess

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.

module.exports = {
  preprocess: () => console.log('Preprocess Script'),
};

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

npm i svelte-preprocess

Modify the svelte-config.js with:

1const sveltePreprocess = require("svelte-preprocess");
2
3const preprocess = sveltePreprocess({
4  // options to preprocess here
5});
6
7module.exports = {
8  preprocess,
9};

Configuring PostCSS

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

1const sveltePreprocess = require("svelte-preprocess");
2
3const preprocess = sveltePreprocess({
4  postcss: {
5    plugins: [
6      // Plugins go in here.
7    ]
8  }
9});
10
11module.exports = {
12  preprocess,
13};

Adding Tailwind

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

1const sveltePreprocess = require("svelte-preprocess");
2
3const preprocess = sveltePreprocess({
4  postcss: {
5    plugins: [
6      require('tailwindcss')
7    ]
8  }
9});
10
11module.exports = {
12  preprocess,
13};

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 🎉