How to Install Tailwind CSS Using Vite

For this project, I'm using vite framework

1. Create your project

   Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use create Vite

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

2. Install Tailwind CSS

   Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files.

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

3. Configure your template paths

   Add the paths to all of your template files in your tailwind.config.js file.

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

4. Add the Tailwind directives to CSS

   Add the @tailwind to ./src/index.css file.

   index.css

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

5. Start your build process

   Run build process.

    npm run dev
   

6. Start using Tailwind in your project

   App.jsx file

    export default function App() {
      return (
        <h1 className="text-3xl font-bold underline">
          Hello world!
        </h1>
      )
    }