Steps to setup Tailwind with React using POSTCSS

Other blog/Medium posts directly tell you to eject from create-react-app, but that’s not needed. Also they don’t discuss about production setup, that’s why I wrote this post.

TLDR: You can directly pull the setup from here.

1. Make a React app using create-react-app
2. Install Tailwind and PostCSS CLI

npm i -D tailwindcss postcss-cli

3. Make a Tailwind config using this command:

./node_modules/.bin/tailwind init

Above command creates tailwind.js at root of your project.

4. Now create postcss.config.js file at root of your project and write the following:

const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss('./tailwind.js')
  ]
}

5. In src/ create tailwind-own.css and write this:

@tailwind preflight;
@tailwind components;
@tailwind utilities;

6. Import “./tailwind.css” (not “./tailwind-own.css”) in your index.js

import './tailwind.css';

As code with @tailwind in tailwind-own.css is not valid CSS, we will use POSTCSS to transform this to valid CSS which will then be imported and used by React app.

7. Change your “scripts” of package.json to include command which runs POSTCSS in watch mode:

"scripts": {
    "start:tw": "postcss ./src/tailwind-own.css -o ./src/tailwind.css -w",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },

“start:tw” takes in src/tailwind-own.css, convert it into src/tailwind.css which contains valid CSS, and as you have imported tailwind.css in your index.js, you will get all Tailwind utility classes.

-w in “start:tw” enables watch mode, so it will watch for any changes in tailwind-own.css and will remake tailwind.css accordingly.

8. Now run your app. You will need two different commands:

One to start up POSTCSS in watch mode using “start:tw”,

npm run start:tw

and other to run React app as usual

npm start

9. Use any of Tailwind’s utility classes and it’ll work! 🎉

Setup for production

Try running `npm run build`. You’ll see 35KB+ of CSS being generated even if you have used two classes or so.

We will use PurgeCSS to strip all unused CSS. Install using

npm i -D @fullhuman/postcss-purgecss

Now change your postcss.config.js which you had created to include code which removes unused CSS for production.

const tailwindcss = require('tailwindcss');
const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    tailwindcss('./tailwind.js'),
    process.env.NODE_ENV==="production" &&  purgecss({
      content: ['./src/**/*.js'],
      css: ['./src/**/*.css'],
    })
  ]
}

`content` denotes the places where you have used CSS classes.

Also add this line in “scripts” of your package.json:

"build:tw": "postcss ./src/tailwind-own.css -o ./src/tailwind.css --env production"

Now to build it for production, we first need to run

npm run build:tw

which creates stripped tailwind.css and then we will run

npm run build

Now look at CSS bundle size. It will be a few KBs or so. Nice.

As said at starting of this post, if you don’t want to setup all this you can go to this repo and download React app which has all this pre-configured.