How to Integrate Tailwind CSS into a React app

Step 1: Create your react project

For this post, we will be using create-react-app to create our react project. This sets up everything we need so that we can start coding relatively quickly. Open the command line and use the following commands.

npm
npx create-react-app react-app-with-tailwind
cd react-app-with-tailwind

yarn
yarn create react-app react-app-with-tailwind
cd react-app-with-tailwind

Step 2: Install Tailwind CSS

After creating our react project, and change the directory to the project folder. This is where we will install tailwind and it's dependencies.

npm
npm install -D tailwindcss postcss autoprefixer

yarn
yarn add -D tailwindcss postcss autoprefixer

This will install tailwindcss postcss and autoprefixer in dev dependencies.

Step 3: Generate Config files

The next step is to generate the configuration files that tailwind css needs. The files can be generated with the following command

npm
npx tailwindcss init -p

yarn
yarn tailwindcss init -p

This will generate two files:

• tailwind.config.js

• postcss.config.js

The files generated will have the default config already set-up.

Step 4: Configure path to files

Inside tailwind.config.js we need to specify the path to our React files.

module.exports = {
   content: [
     "./src/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
     extend: {},
   },
   plugins: [],
 }

This will tell tailwind the path to look for its class names and apply the styling associated with those class names.

Step 5: Add Tailwind Directives

Add the following lines to index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

That's it!
Tailwind CSS has been successfully setup in our React app. We can now use the utility classes in our project.