Tailwind更新后DaisyUI报TypeError：daisyui is not a function求解

问题根源 #

Tailwind v3.4+ 调整了插件加载API，而DaisyUI v4及以上版本才适配新API，版本不匹配或配置写法错误会触发该类型错误。

解决方案 #

1. 对齐DaisyUI与Tailwind版本

• 执行命令查看当前版本：

  npm list daisyui tailwindcss
  

• 若Tailwind为v3.4+，必须使用DaisyUI v4.x及以上版本，执行升级：

  npm install daisyui@latest
  

2. 修正配置文件写法

DaisyUI v4+ 不再通过函数调用方式引入插件，需调整配置：

错误写法（旧版）：

// vite.config.js
import daisyui from 'daisyui'
export default defineConfig({
  plugins: [
    daisyui() // 此处调用函数会报错
  ]
})

正确写法：

• 移除vite.config.js中的daisyui插件配置，统一在tailwind.config.js中配置：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require('daisyui')], // 直接引入插件，无需调用
  daisyui: {
    themes: ['light', 'dark'] // 自定义主题等配置写在这里
  }
}

3. 清理缓存并重启服务

• 删除依赖和锁文件：

  # Windows
  rmdir /s /q node_modules && del package-lock.json
  # macOS/Linux
  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 清理Vite缓存并重启：

  npm run dev -- --clear-cache
  

4. 排查双重配置问题

确保不要同时在vite.config.js和tailwind.config.js中配置DaisyUI插件，仅保留tailwind.config.js中的配置即可。

内容的提问来源于stack exchange，提问作者Vikash_495 Shakya