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.

We Did It Gif

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 😃

Setup Tailwind CSS v3 With React

Comments

More from this blog

Optimizing Website Performance for Speed and User Experience

Useful Web APIs For Your Next Project

How to use the Fetch API in JavaScript

Don't Make These Common Mistakes While Learning To Code

Understanding Units In CSS

Bootstrap React App

Installing & Initializing Tailwind

Updating Config File

Add Tailwind Directives To CSS File

We're Finished

Take Away

Command Palette

Comments

More from this blog

Bootstrap React App

Installing & Initializing Tailwind

Updating Config File

Add Tailwind Directives To CSS File

We're Finished

Take Away