Adding Tailwind CSS to React Snowpack Project

Broken Post? → Let me know

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

# Pass '--use-yarn' to use yarn
npx create-snowpack-app app-name \
	--template @snowpack/app-template-react-typescript

# Go to the project
cd app-name

# Optional: Change git master to main
git 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

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

3. Create configuration files

touch 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,

module.exports = {
  plugins: [
    //... other plugins
    "@snowpack/plugin-postcss",
  ],
}

5. Configure PostCSS for Tailwind CSS

postcss.config.js

const cssnano = require("cssnano")
const tailwindcss = require("tailwindcss")
const autoprefixer = require("autoprefixer")

const plugins =
  process.env.NODE_ENV === "production"
    ? [tailwindcss, autoprefixer, cssnano]
    : [tailwindcss, autoprefixer]

module.exports = { plugins }

6. Add Tailwind CSS Utilities

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

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

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

Image by zmortero from Pixabay

Webmentions

Loading counts...

❤️ 0 💬 0

Fetching Replies...

There is no reply...