Tailwind CSS

Tailwind is a popular class-based CSS utility library. Loading it in Snowpack is easy, and only requires a few steps!

Setup

Tailwind’s JIT mode is the new, recommended way to use Tailwind. To set this up in a Snowpack project, do the following:

1. Install dependencies

From the root of your project, install tailwindcss, PostCSS, and the Snowpack PostCSS plugin.

npm install --save-dev tailwindcss @snowpack/plugin-postcss postcss

2. Configure

You’ll need to create two files in the root of your project: postcss.config.js and tailwind.config.js:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    // other plugins can go here, such as autoprefixer
  },
};

// tailwind.config.js
module.exports = {
  content: ['./public/**/*.html', './src/**/*.{js,jsx,ts,tsx,vue}'],
  // specify other options here
};

Note: be sure to set content: [] correctly for your project structure

Also, you’ll need to add the Snowpack PostCSS plugin to your Snowpack config, and set the Tailwind config option, if you haven‘t already:

  // snowpack.config.mjs
  export default {
    mount: {
      src: '/_dist',
      public: '/',
    },
+   devOptions: {
+     tailwindConfig: './tailwind.config.js',
+   },
+   plugins: [
+     '@snowpack/plugin-postcss',
+   ],
  };

3. Import Tailwind in your CSS

From any global CSS file, add the Tailwind utilites you need (if you don’t have a global CSS file, we recommend creating one at /public/global.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

When you load these with Snowpack, you should see these replaced with Tailwind CSS instead.

⚠️ Make sure you’re importing this file in your main HTML file, like so:

  <head>
+   <link rel="stylesheet" type="text/css" href="/global.css" />
  </head>

More reading