Tailwind for Create-React-App Cheat Sheet
Broken Post? → Let me know
2020-06-12 Updates
- Replaced
autoprefixer
with postcss-preset-env, which supportsautopprefixer
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
# yarn
yarn add -D npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss postcss-preset-env
# npm
npm i -D npm-run-all cross-env cssnano postcss-cli purgecss tailwindcss postcss-preset-env
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
- postcss-preset-env - Supports newer CSS syntax and much more! (e.g. replaces
autoprefixer
) - cssnano - Minify CSS to reduce bundle size
- postcss-preset-env - Supports newer CSS syntax and much more! (e.g. replaces
module.exports = {
plugins: [
require("tailwindcss"),
require("postcss-preset-env")
]
}
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 CSSwatch:css
- Watch Tailwind changes and writes CSSenv:dev/prod
- Sets an environment variable for development or production modereact-scripts:start
: Starts 5 seconds later to prevent an initial empty pagereact-scripts:build
: Creates a production-ready bundlestart
- Watches Tailwind changes and starts CRAbuild
- Build Tailwind and production version of CRA site
"scripts": {
"build:css": "cross-env NODE_ENV=production postcss src/styles/tailwind.css -o src/styles/index.css",
"watch:css": "cross-env NODE_ENV=development postcss src/styles/tailwind.css -o src/styles/index.css --watch",
"react-scripts:start": "sleep 5 && react-scripts start",
"react-scripts:build": "react-scripts build",
"start": "run-p watch:css react-scripts:start",
"build": "run-s 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
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
- Scaffold a new CRA app like
- 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
Webmentions
Loading counts...
❤️ 0 💬 0
Fetching Replies...
There is no reply...