How to Use Tailwind CSS in React with Vite

Tailwind CSS is a utility-first CSS framework that helps you build modern, responsive designs quickly. If you're working with React and Vite, integrating Tailwind CSS is simple and efficient. Here's a step-by-step guide to setting up Tailwind CSS in your React project using Vite.

---

Step 1: Install Tailwind CSS

First, navigate to the Tailwind CSS website and go to the installation section. Select the Vite framework.

Now, open your terminal and run the following command in your React project directory:

npm install -D tailwindcss@3 postcss autoprefixer

This installs Tailwind CSS along with PostCSS and Autoprefixer, which are necessary for processing Tailwind styles.

---

Step 2: Initialize Tailwind CSS

After installation, initialize Tailwind CSS by running:

npx tailwindcss init -p

This command generates two files:

• tailwind.config.js (Tailwind configuration file)

• postcss.config.js (PostCSS configuration file)

---

Step 3: Configure Tailwind for Vite

Open the tailwind.config.js file and update the content section to include your project files:

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

This tells Tailwind to scan your files for class names to generate the required styles.

---

Step 4: Add Tailwind Directives to CSS

Open index.css (or src/index.css) and delete everything inside it. Then, add the following Tailwind directives:

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

These directives import Tailwind’s base styles, component classes, and utility classes.

---

Step 5: Start Your Development Server

Run the following command to start your development server:

npm run dev

Your project is now set up with Tailwind CSS, and you can start building your React app with a powerful utility-first styling approach.

---

Final Thoughts

With Tailwind CSS and Vite, you get a super-fast development experience with minimal configuration. Now, you can start using Tailwind’s utility classes to style your components efficiently. Happy coding!