Tailwind CSS & Svelte on Snowpack - 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
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");23const preprocess = sveltePreprocess({4 // options to preprocess here5});67module.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");23const preprocess = sveltePreprocess({4 postcss: {5 plugins: [6 // Plugins go in here.7 ]8 }9});1011module.exports = {12 preprocess,13};
Adding Tailwind
Tailwind is available as a PostCSS plugin, you can add it with:
1const sveltePreprocess = require("svelte-preprocess");23const preprocess = sveltePreprocess({4 postcss: {5 plugins: [6 require('tailwindcss')7 ]8 }9});1011module.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 🎉