In this article, I'll be showing you how to setup Tailwind CSS v3 with React so you start building great UIs in React with Tailwind's utility classes.

Bootstrap React App

First, lets create a new react app using create-react-app:

npx create-react-app app-name

Then change into its directory:

cd app-name

Replacing app-name with the name of your application

Installing & Initializing Tailwind

Next, we can install Tailwind CSS and its peer dependencies as dev dependenciees:

npm install -D tailwindcss postcss autoprefixer

After installing the dependencies, we can run the init command to generate a tailwind.config.js file:

npx tailwindcss init -p

Updating Config File

Next, we need to update the content property in the tailwind.config.js file:

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

Add Tailwind Directives To CSS File

Lastly, we need to add the following @tailwind directives to the index.css file in the src directory:

/* src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

We're Finished

We can now run the react app with npm start and everything should be working. You can now start using Tailwind CSS in your project.

Take Away

In this article, you have learned how to setup Tailwind CSS with a create-react-app project. I hope this guide has helped you and have a great day!

👌 Thanks for reading this article!

If you like what I do and would love to see more related content, subscribe to my newsletter and follow me on my other social platforms:

GitHub: Blake-K-Yeboah

LinkedIn: Blake Yeboah

Twitter: Blake Yeboah

You can also show your support by buying me a coffee 😃