How to Install Tailwind CSS in React

In this section, we will see how to install and set up Tailwind CSS in React. Let’s start.

Create react project

npm create vite@latest my-project -- --template react
cd my-project

To install Tailwind CSS, run the command below to install Tailwind CSS version 3 and create the Tailwind config file.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

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

Now test Tailwind CSS class in react app.

App.jsx

export default function App() {
  return (
    <div className="container m-40 mx-auto">
      <h1 className="text-2xl font-bold text-cyan-800">
        Tailwind 3 With React Js
      </h1>
      <button className="px-6 py-2 text-sm text-white rounded shadow-xl bg-emerald-500">
        success
      </button>
    </div>
  );
}

Run your build process with npm run dev.

npm run dev

Create react project

saim ansari