Next.js 13项目中Tailwind+DaisyUI边距、颜色失效问题求助

问题背景 #

在Next.js 13 App目录结构的项目中配置Tailwind CSS与DaisyUI后，出现内边距、外边距及颜色失效的问题。修改postcss.config.js后边距问题解决，但DaisyUI主题色（如bg-primary）仍无法生效，推测问题出在tailwind.config.js的配置上。

核心原因 #

你的tailwind.config.js中content配置未包含App目录下的文件。Next.js 13 App目录结构下，页面、组件默认存放在app/文件夹中，而原配置仅扫描了pages/、components/等目录，导致Tailwind无法识别app/目录下组件中使用的DaisyUI主题类，进而无法生成对应样式。

解决方案 #

1. 修正Tailwind的Content扫描路径

更新tailwind.config.js，将app/目录加入content扫描范围：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", // 新增App目录扫描
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./utils/**/*.{js,ts,jsx,tsx}"
  ],
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "night"],
  },
};

2. （可选）扩展DaisyUI主题（自定义颜色）

如果需要自定义DaisyUI主题色（比如修改primary颜色），可以在daisyui配置中扩展内置主题：

daisyui: {
  themes: [
    {
      light: {
        // 继承DaisyUI默认light主题
        ...require("daisyui/src/theming/themes")["light"],
        // 自定义primary颜色
        primary: "#2563eb",
      },
    },
    "night", // 保留night主题
  ],
},

3. 重启开发服务器

修改tailwind.config.js后，必须重启Next.js开发服务器，确保配置生效。

验证 #

重启后，组件中的bg-primary等DaisyUI主题类应该能正常渲染颜色，bg-red-400这类Tailwind原生颜色也会正常生效。

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