DEV Community

loading...
Cover image for Tailwind for Create-React-App Cheat Sheet

Tailwind for Create-React-App Cheat Sheet

dance2die profile image Sung M. Kim Originally published at sung.codes on ・2 min read

Updated on 2020-02-29

  1. Replaced concurrently with npm-run-all
  2. Fixed initial empty page load - Added sleep 5 in package.json.

Based on https://github.com/billimarie/simple-react-tailwind-tutorial

Table of Contents

  1. Install DEV dependencies
  2. Create Tailwind configuration file
  3. Configure PostCSS for Tailwind
  4. Create a Tailwind file
  5. Create NPM scripts
  6. Import Tailwind CSS Output

1. Install DEV dependencies

# yarn
yarn add -D @fullhuman/postcss-purgecss autoprefixer npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss
# npm
npm i -D @fullhuman/postcss-purgecss autoprefixer npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss
Enter fullscreen mode Exit fullscreen mode

2. Create Tailwind configuration file

npx tailwind init tailwind.config.js
Enter fullscreen mode Exit fullscreen mode

3. Configure PostCSS for Tailwind

  1. Create a file postcss.config.js in the project root.
# bash
touch postcss.config.js
# Powershell
new-item postcss.config.js
Enter fullscreen mode Exit fullscreen mode
  1. Configure Post CSS to work with Tailwind
    1. @fullhuman/postcss-purgecss - Tree-shake unused CSS with "purgecss"
    2. autoprefixer - Add browser specific prefixes such as -webkit/-o/-moz
    3. cssnano - Minify CSS to reduce bundle size
const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./public/**/*.html"],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [],
})

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    // Purge and minify CSS only production builds only
    ...(process.env.NODE_ENV === "production"
      ? [purgecss, require("cssnano")]
      : []),
  ],
}
Enter fullscreen mode Exit fullscreen mode

4. Create a Tailwind file

Create a file ./src/styles/tailwind.css.

# bash
mkdir -p ./src/styles/ && touch ./src/styles/tailwind.css
# Powershell
new-item ./src/styles/tailwind.css -ItemType File -Force
Enter fullscreen mode Exit fullscreen mode

Add following Tailwind utilities

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

5. Create NPM Scripts

package.json scripts.

  1. build:css - converts Tailwind to CSS
  2. watch:css - Watch Tailwind changes and writes CSS
  3. env:dev/prod - Sets an environment variable for development or production mode
  4. react-scripts:start: Starts 5 seconds later to prevent an initial empty page
  5. react-scripts:build: Creates a production-ready bundle
  6. start - Watches Tailwind changes and starts CRA
  7. build - Build Tailwind and production version of CRA site
"scripts": {
  "build:css": "postcss src/styles/tailwind.css -o src/styles/index.css",
  "watch:css": "postcss src/styles/tailwind.css -o src/styles/index.css --watch",
  "env:dev": "cross-env NODE_ENV=development",
  "env:prod": "cross-env NODE_ENV=production",
  "react-scripts:start": "sleep 5 && react-scripts start",
  "react-scripts:build": "react-scripts build",
  "start": "run-p env:dev watch:css react-scripts:start",
  "build": "run-s env:prod build:css react-scripts:build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},
Enter fullscreen mode Exit fullscreen mode

6. Import Tailwind CSS Output

  1. Go to ./src/index.js
  2. Replace import './index.css'; with import './styles/index.css';

Resources

  1. Demo repository - https://github.com/dance2die/template.tailwind.cra
    • Created by following this post
  2. CodeSandbox template - https://codesandbox.io/s/create-react-app-tailwind-oqvyu
    • You can fork and play around with Tailwind + React with this one :)

Image Credit: Patent Model of a Sheet-Feed Apparatus for Printing Machines

Discussion (3)

pic
Editor guide
Collapse
lucasmrl profile image
Lucas L.

I was looking for this. Thanks!

Collapse
dance2die profile image
Sung M. Kim Author • Edited

You're welcome~

I updated the post a bit, you might want to check out :)

Collapse
peyman98 profile image
Peyman • Edited

The build script is not purging my styles (Windows OS). so i changed a little bit of scripts and now it's working fine for me.
"scripts": {
"build:css": "postcss src/styles/tailwind.scss -o src/styles/main.scss",
"watch:css": "postcss src/styles/tailwind.scss -o src/styles/main.scss --watch",
"react-scripts:start": "sleep 5 && react-scripts start",
"react-scripts:build": "react-scripts build",
"start": "cross-env NODE_ENV=development run-p watch:css react-scripts:start",
"build": "cross-env NODE_ENV=production run-s build:css react-scripts:build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}