TypeScript项目中TailwindCSS集成daisyUI自定义主题失效求助

问题根源 #

你的配置错误在于把daisyui选项嵌套在了theme.extend内部，这不符合Tailwind + daisyUI的配置规范，导致Tailwind无法正确识别配置逻辑，进而触发内容检测警告。

正确的Tailwind配置（TypeScript） #

将daisyui配置项提升为Tailwind配置的顶级属性，与theme、plugins同级：

import type { Config } from "tailwindcss";

export default {
  content: ["./app/**/*.{js,jsx,ts,tsx}"],
  // daisyUI配置放在顶级层级，与theme平级
  daisyui: {
    themes: [
      {
        devytheme: {
          primary: "#84cc16",
          secondary: "#8f4263",
          accent: "#5c7f67",
          neutral: "#291e00",
          "base-100": "#e9e7e7",
          info: "#3abff8",
          success: "#36d399",
          warning: "#fbbd23",
          error: "#f87272",
        },
      },
    ],
    // 设置默认启用的自定义主题
    theme: "devytheme",
  },
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
} satisfies Config;

启用自定义主题 #

配置完成后，需要在项目根元素（通常是app/root.tsx中的<html>标签）添加data-theme属性，确保自定义主题生效：

// app/root.tsx
export default function App() {
  return (
    <html lang="en" data-theme="devytheme">
      {/* 页面其他内容 */}
    </html>
  );
}

验证修复 #

保存配置后重启开发服务器，Tailwind的"No utility classes were detected"警告会消失，同时daisyUI的自定义主题样式会正常应用到项目中。

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