create-react-app with tailwind via postcss plus purgecss

Johannes Opper

1 min read

·

May 19, 2019

--

4

Listen

Share

Since it took me some time (again) to put this setup together I’ll drop a quick copy and paste guide here for anyone who might need it.

The versions of everything included are:

"react-scripts": "3.0.1"
"npm-run-all": "^4.1.5"
"postcss-cli": "^6.1.2"
"purgecss": "^1.3.0"
"tailwindcss": "^1.0"

Step 0: Setup tailwind

npx tailwind init tailwind.config.js

And create ./src/css/tailwind.src.css with the following content:

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

And finally import it in App.jsx

import './tailwind.css

Step 1: Adept build steps

In package.json change the regular create-react-app build steps to:

"scripts": {
  "start": "npm-run-all -p start:css start:js",
  "build": "npm-run-all build:css build:js",
  "start:js": "react-scripts start",
  "build:js": "react-scripts build",
  "start:css": "postcss src/css/tailwind.src.css -o src/tailwind.css -w",
  "build:css": "postcss src/css/tailwind.src.css -o src/tailwind.css --env production" 
},

Step 2: Add postcss config

This config is located at postcss.config.js — postcss will pick it up automatically.

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: [
    './src/**/*.jsx',
    './src/**/*.js',
    './public/index.html'
  ],
  css: ['./src/tailwind.css'],
  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production' ? [purgecss] : []
  ],
};