Daisy UI and TailwindCSS configuration error

Question

So when I am import Daisy UI than configuration is show the error like this I want to use Daisy UI component in my frontend and I am using latest TailwindCSS version.

I'm getting error when starting the dev server after importing Daisy UI in my TailwindCSS project:

TypeError: handler is not a function

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import daisyui from 'daisyui'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    daisyui,
  ],
})

Answer 1

The problem arose because I was using the latest stable version of Daisy UI, which seemed to have compatibility issues with my current setup means TailwindCSS v4 .

I found that the beta version of Daisy UI had a fix for this issue. Here are the steps to resolve it.

npm i -D tailwindcss@latest daisyui@beta

in CSS file

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

and in vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react() , tailwindcss()],
})

This configuration is work for me. There is no need to configure tailwind.config.js