It is advisable to use Vite, Next.js, Remix, or Parcel instead of Create React App to install Tailwind CSS in the case of new projects.

How to install Tailwind CSS with Create React App

1. Create your project;
Using create-react-app, to create a new React project if you don’t have one already.
npx create-react-app my-project
cd my-project

2. Install Tailwind CSS;
Via npm, install Tailwind CSS and its dependencies, later in order to generate tailwind.config.js and postcss.config.js, run the init command.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Configure your template paths;
In your tailwind.config.js file add all the paths to all your template files.

Module.exports = {
content: [
”./src/**/*.{js,jsx,ts,tsx}”,
],
theme: {
Extend: {},
},
plugins: [],
}

4. Add the Tailwind directives to your CSS;
For each of Tailwind’s layers add the @tailwind directives to your ./src/index.css.file.
@tailwind base;
@tailwind components:
@tailwind utilities:

5. Start your build process.
With npm run start to run your build process
npm run start

6. Start using Tailwind in your project.
To style your content, start using Tailwind’s utility classes

export default function App() {
return (

Hello, Let’s start working with tailwind css!

)
}