Updated July 2021
Building a simple website using React is possible with the help of TailwindCSS, PostCSS, and React Router. I’ve updated this tutorial with notes and code changes regarding different npm packages.
This tutorial is great for developers who are already familiar with Node.js and npm. If you are not, I recommend installing the “Required” list below and reading through the Node and npm docs.
- Node: 8.11.3+
- npm: 6.12.1+
- npx: 7.19.1+
- create-react-app: 7.19.1+
Part One: Getting Started
1. Initialize your React app using `create-react-app`:
$ npx create-react-app react-tailwind-site
If you do not have
npx will ask to install it for you.
2. Let’s start it up!
$ cd react-tailwind-site ; npm start // Linux
$ cd react-tailwind-site & npm start // Windows
You should see a new window (
localhost:3000) that looks like this:
Part Two: Setting Up Tailwind & PostCSS
1. Install the following packages: tailwindcss, autoprefixer, postcss-cli, and craco (to watch & reload CSS updates):
$ npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
$ npm install @craco/craco
Notes (as of July 2021):
- According to Tailwind docs, we also need to install CRACO in order to manipulate PostCSS.
- Additionally, we can only use PostCSS version 7. Version 8 is not supported with Create React App; see the GitHub issue for updates.