CODEWITHSUNDEEP
reactjstailwind-cssvitedaisyuitailwind-css-4
Rinkal
Rinkal

Reputation: 71

Daisy UI and TailwindCSS configuration error

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,
  ],
})

Upvotes: 1

Views: 995

Answers (2)

rozsazoltan
rozsazoltan

Reputation: 8835

Updated (2025-03-01)

With the release of DaisyUI v5, the documentation has been updated and now includes the necessary installation steps for TailwindCSS v4.

How to install daisyUI as a Tailwind CSS plugin?

You need Node.js and Tailwind CSS installed.

  1. Install daisyUI as a Node package:

    npm i -D daisyui@latest

  2. Add daisyUI to app.css:

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

Original (2025-01-23)

Daisy UI is not a Vite plugin and thus, should not be in the vite.config.js. Rather, it is a Tailwind plugin and thus should be included with @plugin (when Daisy UI is compatible with v4).

Source: Wongjn's comment

TailwindCSS v4 (Daisy UI stable not supported yet; only Beta avaliable)

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

Use the @plugin directive to load a legacy JavaScript-based plugin. Add it to your own CSS file:

@import "tailwindcss";
@plugin "daisyui"; /* added Daisy UI TailwindCSS plugin */

In the meantime, use it with TailwindCSS v3 by following the instructions below:

TailwindCSS v3 (supported)

npm install -D tailwindcss@3 daisyui@4

tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{vue,js,ts}',
  ],
  plugins: [
    require('daisyui'), // added Daisy UI TailwindCSS plugin
  ],
};

or in an ES6 compatible version:

import daisyui from 'daisyui';

export default {
  content: [
    './src/**/*.{vue,js,ts}',
  ],
  plugins: [
    daisyui, // added Daisy UI TailwindCSS plugin
  ],
};

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from 'tailwindcss' // use TailwindCSS v3 installation guide

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    // You don't need to add Daisy UI here because it is not a Vite plugin.
  ],
})

Upvotes: 3

Rinkal
Rinkal

Reputation: 71

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

Upvotes: 1

Related Questions