To set up Tailwind CSS in a React project, follow these steps:

1. Create a New React Project

If you don’t have a React project already, create one using:

npx create-react-app my-app
cd my-app

2. Install Tailwind CSS

Run the following command to install Tailwind CSS, PostCSS, and Autoprefixer:

npm install -D tailwindcss postcss autoprefixer

Then initialize Tailwind by running:

npx tailwindcss init

This will generate a tailwind.config.js file in your project.

3. Configure Tailwind

Inside tailwind.config.js, specify the paths to all your template files by adding this content:

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

4. Add Tailwind Directives to CSS

Open your src/index.css file and add the following Tailwind directives:

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

5. Run Your Project

Finally, start your React project:

npm start

Tailwind CSS should now be set up in your React project. You can begin using Tailwind classes directly in your components.

Example:

function App() {
  return (
    <div className="bg-blue-500 text-white text-center p-4">
      <h1 className="text-2xl font-bold">Welcome to React with Tailwind CSS</h1>
    </div>
  );
}

That’s it! You’re all set to start using Tailwind in your React project.