How to Set Up Tailwind CSS with React

Tailwind is a CSS framework that is increasing in popularity in recent times. I won’t go over the reasons in this article, and at a glance it might seem a bit messy (the example on their home page shows like 30+ classes on only a few elements!). But as someone who hated CSS, I can say that using Tailwind has actually been enjoyable, and I recommend giving it a go.

Getting Started

We’ll start off by using create-react-app to bootstrap a react app. If you are writing your own webpack scripts, then that’s also fine.

I’ll be using TypeScript here, but if you prefer you can just use the standard JavaScript version.

npx create-react-app my-app --template typescript

Next its time to install the dependencies. We’ll start by adding tailwind.

npm i tailwindcss

Now we’ll add all the rest of our dependencies. These will be used to improve our development process.

npm i -D autoprefixer chokidar-cli cross-env cssnano postcss postcss-cli npm-run-all

Creating our Configuration Files

Tailwind

First, we’ll make a Tailwind config file. We could do this ourselves, but the folks at Tailwind created a useful npx…