Video Tutorial

Step 1: Create a New Vite React App

First, you'll need to create a new Vite React project. Open your terminal and run the following command:

npm create vite@latest my-react-app --template react

Navigate to your project directory:

cd my-react-app

Replace my-react-app with your desired project name.

Step 2: Install Dependencies

Install Tailwind CSS along with its peer dependencies:

npm install -D tailwindcss postcss autoprefixer

After installing Tailwind CSS, generate the tailwind.config.js and postcss.config.js files:

npx tailwindcss init -p

Step 3: Configure Tailwind CSS

Open the tailwind.config.js file and configure the content array to include your React components:

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

This ensures that Tailwind will purge unused styles from your final build.

Step 4: Add Tailwind Directives to Your CSS

In your project, open the src/globals.css file (or create it if it doesn't exist) and add the following Tailwind directives:

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

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

Step 5: Include globals.css file in App.tsx

Open the src/App.tsx file and add the following import statement at the top:

import React from "react";

import "./globals.css";


export default function App() {
  return (
    <div className="App">
      <h1 className="text-3xl font-bold underline">
        Hello, Tailwind CSS with Vite and React!
      </h1>
    </div>
  );
};

Step 6: Start Your Development Server

You're now ready to start your Vite development server and see Tailwind CSS in action. Run the following command:

npm run dev

Open your browser and navigate to http://localhost:5173 to see your Vite React app styled with Tailwind CSS.

Conclusion

Setting up Tailwind CSS with a Vite React app is quick and easy, providing a streamlined development experience. With the speed of Vite and the flexibility of Tailwind, you can build fast, responsive, and highly customizable UIs with ease. Whether you're starting a new project or integrating Tailwind into an existing one, this setup is sure to enhance your workflow.