Agney Menon

Posted on Apr 19, 2020 • Originally published at blog.agney.dev

Tailwind CSS with Snowpack

#snowpack #webdev #tailwindcss #css

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.

Subscribe to my monthly web newsletter.

View on GitHub

Top comments (2)

$fractal profile image$

Fractal • Jun 14 '20

Love this!! Have you ever managed to get this working with snowpack-svelte / rollup?

Agney Menon • Jun 14 '20

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:

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 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.