Setup Tailwind 2.0 with Create-React-App in 5 Minutes

A simple guide on setting up a boilerplate create-react-app application with Tailwind CSS 2.0.

Created on: 2021–02–08 14:45:14

Step 1: Install Dependencies

npx create-react-app ./client &&
cd client &&
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9 &&
npm install @craco/craco &&
curl 'https://gist.githubusercontent.com/thoughtstile/32737663cab5399e7adc03a911e1e989/raw/9c881b1b596c76766f0137eae740333bbda8b924/tailwind.config.js' -o tailwind.config.js &&
curl https://gist.githubusercontent.com/thoughtstile/192f81657c2593e664e8c6a6969ea700/raw/79447e17ddfdf2ec3909feae27177ec11b32bd68/craco.config.js -o craco.config.js &&
curl https://gist.githubusercontent.com/thoughtstile/95ca6c4df1b9f38e82703857f1d9e562/raw/013b41ecca8d067695df4ea4609ca1aef96f549b/index.css  -o ./src/index.css &&
curl https://gist.githubusercontent.com/thoughtstile/5d4b56291b2f5aca60fd5c52763e9e07/raw/3cf89cace76e08220ec56629e380a20799e768ca/App.js -o ./src/App.js

Step 2: Alter ‘package.json’

In your package.json, replace your default scripts section to use craco instead of react-scripts for all scripts except eject: