Introduction

This is a cheatsheet for adding Tailwind CSS support for a Snowpack project (bootstrapped with React+TypeScript template).

Commandline Steps

1. Create a project

1# Pass '--use-yarn' to use yarn2npx create-snowpack-app app-name \3	--template @snowpack/app-template-react-typescript4
5# Go to the project6cd app-name7
8# Optional: Change git master to main9git branch -M master main

You can find more templates (@snowpack/app-template-*) in the offical repository.
https://github.com/snowpackjs/snowpack/tree/main/create-snowpack-app/cli#official-app-templates

2. Install NPM packages

1npm install --save-dev \2  @snowpack/plugin-postcss postcss postcss-cli \3  tailwindcss autoprefixer cssnano

3. Create configuration files

1touch postcss.config.js && npx tailwindcss init

Note: npx tailwindcss init creates tailwind.config.js file with empty options

Configuration Steps

4. Add PostCSS support to Snowpack

snowpack.config.js,

1module.exports = {2  plugins: [3    //... other plugins4    "@snowpack/plugin-postcss",5  ],6};

5. Configure PostCSS for Tailwind CSS

postcss.config.js

1const cssnano = require("cssnano");2const tailwindcss = require("tailwindcss");3const autoprefixer = require("autoprefixer");4
5const plugins =6  process.env.NODE_ENV === "production"7    ? [tailwindcss, autoprefixer, cssnano]8    : [tailwindcss, autoprefixer];9
10module.exports = { plugins };

6. Add Tailwind CSS Utilities

Replace ./src/index.css content with Tailwind directives

1@tailwind base;2@tailwind components;3@tailwind utilities;

Check out the official Taiwlind CSS Installation documentation for more options.

---

Image by zmortero from Pixabay