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.
First resource we come across is on the site for Snowpack:
Tailwind works as-expected with Snowpack. Just follow the official Tailwind Install Guide. When you get to step #4 (“Process your CSS with Tailwind”) choose the official Tailwind CLI option to generate your CSS. Import that generated CSS file in your HTML application.
But this misses an important part of Process your CSS with Tailwind step on the Tailwind website:
For simple projects or just giving Tailwind a spin, you can use the Tailwind CLI tool to process your CSS.
So it's only for simpler projects or may be even trying out Tailwind.
What are we missing with Tailwind CLI?
Tailwind CLI currently does not remove unnecessary classes from Tailwind. This means that without using any of classes required for Tailwind, you would be stuck with a file of size above 1MB.
Tailwind recommends handling this by adding a PurgeCSS PostCSS Plugin.
Steps to add PurgeCSS
Process
There are several ways/plugins for PostCSS that can be used. For build tool we are using, there is even a Rollup plugin for PostCSS. But the reason we are using Snowpack is to get rid of tooling, not to add more of them. So, it would make sense to add PostCSS as it's CLI tool and also run it in production only.
Snowpack Init
First, to start of a normal snowpack project:
npm init -y
# Snowpack and a dev server of choice
npm install --save-dev snowpack servor
# Tailwind CSS. Because.
npm i tailwind
npx snowpack
You can find full guide for installing snowpack on their site
Now, for our developer tools:
# Our postcss tools
npm i --save-dev postcss-cli @fullhuman/postcss-purgecss
# ease of setting env variables and running npm scripts.
npm i cross-env npm-run-all
Tailwind Init
Setting up tailwind:
Add a src/style.css file with Tailwind necessary CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
Create tailwind.config.js by running:
npx tailwindcss init
You can edit the file to change theme or add plugins to Tailwind CSS.
Find full guide to installation on Tailwind site.
Add an HTML file to connect CSS to the HTML.
In index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Snowpack - Simple Example</title>
<link rel="stylesheet" type="text/css" href="/src/output.css">
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/app.js"></script>
</body>
</html>
NPM Scripts for development
There are two things we want to do on development:
- Start dev server
- Use Tailwind CSS to convert our style file to CSS.
In package.json:
{
"scripts": {
"dev": "cross-env NODE_ENV=development run-s dev:*",
"dev:server": "npx servor --reload",
"dev:css": "tailwindcss build src/style.css -o src/output.css",
}
}
This pretty much takes care of the development setup. For development, you can run:
npm run dev
Setup PostCSS
Add a postcss.config.js file at root which we will be using as configuration for PostCSS:
const purgecss = require('@fullhuman/postcss-purgecss')({
content: [
'./index.html',
'./src/**/*.js',
],
// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})
module.exports = {
plugins: [
require('tailwindcss'),
...process.env.NODE_ENV === 'production'
? [purgecss]
: []
]
}
We are adding tailwind and purgeCSS in our PostCSS configuration and has setup PurgeCSS to run only on Production. (We are using PostCSS only on production so it's not like it's doing anything, simply following Tailwind docs on the same.)
NPM Scripts for Production
We will run the same processes for production:
{
"scripts": {
"build": "cross-env NODE_ENV=production run-p build:*",
"build:styles": "npx postcss src/style.css -o src/output.css",
"build:module": "npx snowpack --optimize --clean",
}
}
For production, you can run:
npm run build
You will find that I'm building source and development version of CSS to the same file. This is intentional. It is possible to add a dist folder and move assets and styles and build files into the folder and fix other issues that happen with it. Feel free but remember the reason you chose Snowpack was to lighten tooling.
agneym
/
tailwind-snowpack
A simple Tailwind Snowpack starter
Tailwind - Snowpack Starter
Find complete blog on How to setup Tailwind CSS with Snowpack.
Top comments (2)
Love this!! Have you ever managed to get this working with snowpack-svelte / rollup?
Things have changed a bit since I wrote this for the new release of TailwindCSS and Snowpack v2.
Here is my latest setup on svelte:
TailwindCSS with Svelte and Snowpack v2
Svelte with TailwindCSS - Snowpack
Create a new project with:
Uses
svelte-preprocessAvailable Scripts
npm start
Runs the app in the development mode. Open 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.jsonconfig file.Q: What about Eject?
No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.
This is a fork of official template Svelte starter