Building for production

While learning you loaded daisyUI from the CDN — a file with every component that weighs about a megabyte. A project build works differently: Tailwind scans your files and adds to the final CSS only the daisyUI classes and utilities it found there. The result is many times smaller.

Building

In the Vite project from the installation lesson run:

npm run build

A ready site appears in the dist folder: index.html and an assets folder with CSS and JS files that have a hash in their names, such as index-4f2a9c.css. This whole folder is what you upload to the server. To check the result before publishing, run:

npm run preview

It starts a local server with the built version — open the address it prints in the terminal.

What ends up in the CSS

Themes are the only thing added regardless of the markup: each theme is a set of variables, and you can switch to it at any moment. So keep only the ones you need in the settings:

@import "tailwindcss";
@plugin "daisyui" {
  themes: light --default, dark --prefersdark;
}

Where Tailwind looks for classes

Tailwind reads project files as text, without running the code, and skips node_modules and files listed in .gitignore. If classes live somewhere else — say, in templates outside the project folder — add the path with the @source directive in src/style.css, as described in the Tailwind course.

Common mistake

Gluing a class name together from pieces in JavaScript:

// src/main.js
const status = 'success';
document.querySelector('#message').className = 'alert alert-' + status;

The alert turns out grey, without the green color: the full string alert-success is not in any file, so Tailwind did not add its styles. It is worse when such a class happens to appear somewhere else on the site: then everything works until it is removed from there. Write class names in full — for example, through an object:

// src/main.js
const alertClasses = {
  success: 'alert alert-success',
  error: 'alert alert-error',
};
document.querySelector('#message').className = alertClasses.success;

Now both strings are in the file, and their styles get into the build.