Installing with Vite

The CDN is fine for experiments, but in a project daisyUI is installed with npm. Then the build includes only the components you use, and the CSS file stays small. The build here is done by Vite — a tool that runs a development server and prepares files for publishing.

Creating the project

You need Node.js 20 or newer. Create a project called learnup from the vanilla template — plain HTML and JavaScript:

npm create vite@latest learnup -- --template vanilla
cd learnup
npm install

Installing Tailwind and daisyUI

First install Tailwind with its Vite plugin, then daisyUI. The -D flag records the package in devDependencies — dependencies needed only for the build:

npm install tailwindcss @tailwindcss/vite
npm i -D daisyui

Create a vite.config.js file in the project root and add the Tailwind plugin:

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
 
export default defineConfig({
  plugins: [tailwindcss()],
});

Adding daisyUI in CSS

Replace the whole content of src/style.css with two lines:

@import "tailwindcss";
@plugin "daisyui";

The first line loads Tailwind, the second loads the daisyUI plugin. No separate config file is needed: in Tailwind 4 and daisyUI 5 everything is written right in CSS. By default two themes are included — light and dark, and dark turns on by itself when the operating system uses dark mode.

In src/main.js keep only the style import:

// src/main.js
import './style.css';

Markup

Open index.html in the project root and replace the content of <body>:

<body>
  <div class="p-8">
    <h1 class="mb-4 text-3xl font-bold">LearnUp</h1>
    <button class="btn btn-primary">Enroll in a course</button>
  </div>
  <script type="module" src="/src/main.js"></script>
</body>

The preview under the code shows the file without styles — in the project Vite adds them. Start the development server:

npm run dev

Open http://localhost:5173: there is a large heading and a purple button. Change btn-primary to btn-secondary and save the file — the page reloads by itself and the button turns pink.

Project structure

learnup/
├── index.html
├── vite.config.js
├── package.json
└── src/
    ├── main.js
    └── style.css

daisyUI classes go into index.html and any files in src: Tailwind finds them by itself during the build.

Common mistake

Following a daisyUI 4 guide and creating tailwind.config.js with plugins: [require('daisyui')]. Tailwind 4 does not read that file by default, so the daisyUI classes never appear. In version 5 the plugin is added only with the @plugin "daisyui"; line in the CSS file, right after @import "tailwindcss";.