Updated on 2020-02-29
- Replaced
concurrently
with npm-run-all - Fixed initial empty page load - Added
sleep 5
in package.json.
Based on https://github.com/billimarie/simple-react-tailwind-tutorial
Table of Contents
- Install DEV dependencies
- Create Tailwind configuration file
- Configure PostCSS for Tailwind
- Create a Tailwind file
- Create NPM scripts
- 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
- Create a file
postcss.config.js
in the project root.
# bash
touch postcss.config.js
# Powershell
new-item postcss.config.js
- Configure Post CSS to work with Tailwind
- @fullhuman/postcss-purgecss - Tree-shake unused CSS with "purgecss"
-
autoprefixer - Add browser specific prefixes such as
-webkit/-o/-moz
- 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.
-
build:css
- converts Tailwind to CSS -
watch:css
- Watch Tailwind changes and writes CSS -
env:dev/prod
- Sets an environment variable for development or production mode -
react-scripts:start
: Starts 5 seconds later to prevent an initial empty page -
react-scripts:build
: Creates a production-ready bundle -
start
- Watches Tailwind changes and starts CRA -
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
- Go to
./src/index.js
- Replace
import './index.css';
withimport './styles/index.css';
Resources
- Demo repository - https://github.com/dance2die/template.tailwind.cra
- Created by following this post
- 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
Top comments (4)
I was looking for this. Thanks!
You're welcome~
I updated the post a bit, you might want to check out :)
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"
}