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>
Ajink Gupta
Ajink Gupta

Ajink Gupta is a software developer from Dombivli, Maharashtra, India. He has expertise in a variety of technologies including web development, mobile app development, and blockchain. He works with languages and frameworks like JavaScript, Python, Flutter, React, and Django.

Ajink Gupta is also active on several platforms where he shares his work and engages with the community. You can find his projects and contributions on GitHub and follow his tutorials and updates on his YouTube channel​ . He also has a personal website where he showcases his portfolio and ongoing projects at ajinkgupta.vercel.app

Articles: 59