← Go Back

Tailwind for Create-React-App Cheat Sheet

Broken Post? → Let me know

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

2. Create Tailwind configuration file

npx tailwind init tailwind.config.js

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
  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")]
      : []),
  ],
}

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

Add following Tailwind utilities

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

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"
},

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

Webmentions

Loading counts...

❤️ 0 💬 0
Fetching Replies...
There is no reply...