Install Tailwind CSS with Create React App

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

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 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!

)
}