How to Install Tailwind CSS in Vite App

How to Install Tailwind CSS in Vite App , Tailwind CSS is a utility-first CSS framework that has gained immense popularity for its rapid and efficient styling capabilities. When combined with Vite, a lightning-fast build tool, you can create React applications that are not only visually appealing but also performant and enjoyable to develop.

In this guide, we’ll walk you through the process of integrating Tailwind CSS into your Vite-powered React app. We’ll cover the installation, configuration, and usage of Tailwind, allowing you to leverage its utility classes to style your components with ease. Whether you’re starting a new project or looking to enhance an existing one, adding Tailwind CSS to your Vite React app can significantly streamline your styling workflow and improve the overall development experience.

Follow Below Steps : step 01

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

Now update/replace code inside your tailwind.config.js with below code

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

add below code in your index.css file

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

Now run your vite app

npm run dev

Below is an basic template you can use it to test your tailwind installation

 <h1 className="text-3xl font-bold underline">
      Hello Bhai !
  </h1>