How to Add Tailwind CSS to Your React Project

1. Install TailwindCSS

First, open your terminal in your project's root directory and install TailwindCSS along with its peer dependencies using npm or yarn:

npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

This command will create two files in your project: tailwind.config.js and postcss.config.js.

2. Configure TailwindCSS

Edit your tailwind.config.js file to enable TailwindCSS to purge your CSS in production:

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

3. Include Tailwind in Your CSS

Create a CSS file (if you don’t have one already) where you will import Tailwind’s directives. You can name it anything, like src/index.css:

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

4. Import the CSS File

Make sure to import the CSS file in your React project’s entry file (typically src/index.js or src/App.js):

import './index.css';

5. Start Using Tailwind Classes

Now, you can start using TailwindCSS classes in your React components. For example:

function App() {
  return (
    <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
      <div>
        <h1 className="text-xl font-medium text-black">Welcome to Tailwind CSS!</h1>
        <p className="text-gray-500">You're ready to build awesome interfaces!</p>
      </div>
    </div>
  );
}