2020-06-12 Updates
- Replaced autoprefixer with postcss-preset-env, which supports autopprefixer and more. Set up instruction can be found in the official documentation too.
- Tailwind CSS version 1.4.4 supports purge css natively. Installation for purgecss & @fullhuman/postcss-purgecss are removed.
2020-02-29 Updates
- 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
Assumption
I will assume that you know how to create a new React site using Create-React-App and created a site.
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
12yarn add -D npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss postcss-preset-env34npm i -D npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss postcss-preset-env
2. Create Tailwind configuration file
1npx tailwind init tailwind.config.js
3. Configure PostCSS for Tailwind
- Create a file postcss.config.js in the project root.
12touch postcss.config.js34new-item postcss.config.js
- Configure Post CSS to work with Tailwind
- postcss-preset-env - Supports newer CSS syntax and much more! (e.g. replaces autoprefixer)
- cssnano - Minify CSS to reduce bundle size
1module.exports = {2 plugins: [require("tailwindcss"), require("postcss-preset-env")],3};
4. Create a Tailwind file
Create a file ./src/styles/tailwind.css.
12mkdir -p ./src/styles/ && touch ./src/styles/tailwind.css34new-item ./src/styles/tailwind.css -ItemType File -Force
Add following Tailwind utilities
1@tailwind base;2@tailwind components;3@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
1"scripts": {2 "build:css": "cross-env NODE_ENV=production postcss src/styles/tailwind.css -o src/styles/index.css",3 "watch:css": "cross-env NODE_ENV=development postcss src/styles/tailwind.css -o src/styles/index.css --watch",4 "react-scripts:start": "sleep 5 && react-scripts start",5 "react-scripts:build": "react-scripts build",6 "start": "run-p watch:css react-scripts:start",7 "build": "run-s build:css react-scripts:build",8 "test": "react-scripts test",9 "eject": "react-scripts eject"10},
6. Import Tailwind CSS Output
- Go to ./src/index.js
- Replace import './index.css'; with import './styles/index.css';
Resources
- create-react-app template in TypeScript (created by me 🙂), cra-template-tailwindcss-typescript.
- Scaffold a new CRA app like npx create-react-app my-app --template tailwindcss-typescript
- Most of steps in this post is used in the project
- 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