Tailwind is a popular class-based CSS utility library.

Using Tailwind with Native CSS

The easiest way to use Tailwind is via native CSS @import or JS import.

/* index.css */
@import 'tailwindcss/dist/tailwind.css';

/* index.js */
import 'tailwindcss/dist/tailwind.css';

This imports Tailwind’s full CSS build into your application. This simple usage comes at the cost of performance: Tailwind’s full CSS build is 3.5+ MB of CSS. For any serious production use, the Tailwind team strongly recommends using PostCSS.

Using Tailwind with PostCSS

Follow our PostCSS guide to set up PostCSS in your Snowpack project. Then, add Tailwind and autoprefixer as plugins to your postcss.config.js:

// postcss.config.js
// Taken from: https://tailwindcss.com/docs/installation#using-tailwind-with-postcss
module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ],
};

Once the plugin is enabled, you can replace your native CSS dist imports with Tailwind’s more powerful base, components, and utilities imports:

/* index.css */
- @import 'tailwindcss/dist/tailwind.css';
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;

Follow the official Tailwind CSS Docs for more information.