Install Tailwind CSS And Daisy UI with Vite

1. Create your project

Start by creating a new Vite project if you don't have one set up already.

Terminal

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

2. Install Tailwind CSS

Terminal

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.

tailwind.config.js

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

4. Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind's layers to your ./src/index.css file.

./src/index.css

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

5. Install daisyUI

Install daisyUI as a Node package:

Terminal

npm i -D daisyui@latest

6. Add daisyUI to tailwind.config.js

tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  plugins: [require('daisyui')],
};