Tailwind CSS & Svelte on Snowpack - Svelte Preprocess

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:

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  // options to preprocess here
});

module.exports = {
  preprocess,
};

Configuring PostCSS

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

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      // Plugins go in here.
    ]
  }
});

module.exports = {
  preprocess,
};

Adding Tailwind

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

const sveltePreprocess = require("svelte-preprocess");

const preprocess = sveltePreprocess({
  postcss: {
    plugins: [
      require('tailwindcss')
    ]
  }
});

module.exports = {
  preprocess,
};

After installing tailwindcss package ofcourse.

---

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

agneym / svelte-tailwind-snowpack

TailwindCSS with Svelte and Snowpack v2

Svelte with TailwindCSS - Snowpack

✨ Community template for Svelte and Tailwind.

Create a new project with:

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

Uses svelte-preprocess

Available Scripts

npm start

Runs the app in the development mode. Open http://localhost:8080 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

npm run build

Builds a static copy of your site to the build/ folder. Your app is ready to be deployed!

For the best production performance: Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your snowpack.config.json config file.

Q: What about Eject?

No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.

View on GitHub

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

Have Fun 🎉

Comments

[Peter Lau]

Nice post! BTW, how to make snowpack work with "import * from" syntax?