2021 Update: Build A Website With Tailwind CSS, PostCSS, React, & React Router

Create a simple, multi-page website that watches your CSS changes & refreshes your app, accordingly.

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.

Required

• 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 create-react-app installed, 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:

Ta-da! New React website.

Having trouble? See the Troubleshooting section on the GitHub repo.

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.