DaisyUI 5 Upgrade & Migration Pattern

When upgrading a Tailwind v3 + DaisyUI v4 project to Tailwind v4 + DaisyUI 5, follow these exact steps:

1. Clean Dependencies

DaisyUI 5 requires Tailwind CSS v4, which deprecates standard PostCSS plugins in favor of @tailwindcss/vite for Vite/SvelteKit projects.

npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss @tailwindcss/vite daisyui@5 @tailwindcss/typography

2. Remove Old Configuration

Tailwind v4 removes tailwind.config.js and postcss.config.js. Delete both files:

rm tailwind.config.js postcss.config.js

3. Configure Vite

Update vite.config.ts (or .js) to register the Tailwind v4 Vite plugin:

import tailwindcss from '@tailwindcss/vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [
		tailwindcss(),
		sveltekit()
	]
});

4. Rewrite Global CSS

Replace the old @tailwind directives in your main CSS file (e.g. src/app.css or src/global.css) with standard v4 imports and DaisyUI plugins. Custom themes are now defined via @plugin "daisyui/theme" block directly in CSS:

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@plugin "daisyui";

/* Custom Theme Override Example */
@plugin "daisyui/theme" {
  name: "custom-theme";
  default: true;
  prefersdark: true;
  color-scheme: dark;

  /* Colors */
  --color-primary: #8b5cf6;
  --color-primary-content: #ffffff;
  --color-secondary: #a78bfa;
  --color-base-100: #0b0d19;
  
  /* Additional DaisyUI 5 theme vars:
     --color-accent, --color-neutral, --color-info, etc.
     --radius-selector, --radius-field, --radius-box, etc. */
}