SvelteKit项目中@apply调用DaisyUI input类报错求解决方案

1. 确认DaisyUI已正确加入Tailwind配置 #

打开tailwind.config.js，确保plugins数组里包含DaisyUI，这是让Tailwind识别DaisyUI组件类的核心：

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: { extend: {} },
  plugins: [require("daisyui")], // 必须存在这一行
  daisyui: { themes: ["light", "dark"] } // 可选主题配置
};

2. 调整样式文件的导入顺序 #

在app.scss中，必须先导入Tailwind的基础、组件、工具类，再使用@apply调用DaisyUI的类，否则Tailwind还未加载DaisyUI的样式就会报错：

@tailwind base;
@tailwind components;
@tailwind utilities;

// 在这里编写自定义样式
.custom-input {
  @apply input;
}

3. 用@layer components包裹自定义样式（推荐） #

将使用@apply的代码放到@layer components块中，确保自定义样式和DaisyUI的组件类处于同一层级，避免优先级冲突：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .custom-input {
    @apply input;
  }
}

4. 清除缓存并重启开发服务器 #

缓存可能导致Tailwind未识别新配置，执行以下步骤：

• 关闭当前SvelteKit开发服务器
• 删除项目根目录下的.svelte-kit和node_modules/.cache文件夹
• 重新运行npm run dev

5. 检查依赖版本兼容性 #

DaisyUI不同版本对Tailwind有版本要求（比如DaisyUI v4需要Tailwind v3.3+），查看package.json确认版本匹配：

{
  "devDependencies": {
    "tailwindcss": "^3.3.0",
    "daisyui": "^4.0.0"
  }
}

版本不兼容时，执行升级命令：

npm update tailwindcss daisyui

内容的提问来源于stack exchange，提问作者Daniel Graziani