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.