能否在编译时为Tailwind的DaisyUI设置默认主题？

1. 正确重写默认light主题 #

你之前的配置未继承DaisyUI默认light主题的完整变量，导致自定义主题未生效。修改tailwind.config.js如下：

module.exports = {
  // 其他Tailwind配置项
  plugins: [require('daisyui')],
  daisyui: {
    defaultTheme: "light", // 指定默认使用自定义的light主题
    themes: [
      {
        light: {
          // 继承默认light主题的所有变量，再覆盖需要修改的颜色
          ...require("daisyui/src/theming/themes")["light"],
          primary: '#EF3054',
          secondary: '#C67F43',
          accent: '#43AA8B',
          neutral: '#FBF5F3',
          base100: '#FFFFFF',
          // 如需保留默认的info/success/warning/error可省略，需要修改则添加对应值
        },
      },
      // 如需保留其他默认主题（如dark），可添加字符串形式的主题名，比如"dark"
    ],
  }
}

2. 让@apply编译时使用自定义主题样式 #

方法一：用theme()函数直接引用主题变量

在CSS中结合BEM类名时，通过Tailwind的theme()函数调用自定义主题变量，确保编译时直接生效：

.card {
  @apply rounded-lg p-4;
  background-color: theme('colors.base-100');
}

.card__title {
  @apply text-xl font-bold;
  color: theme('colors.primary');
}

.card__button {
  @apply px-4 py-2 rounded;
  background-color: theme('colors.secondary');
  color: theme('colors.white');
}

方法二：全局默认应用自定义主题样式

如果希望页面未指定data-theme时，全局自动使用自定义light主题，可在CSS入口文件添加：

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

/* 全局绑定自定义light主题的基础样式 */
:root {
  @apply bg-base-100 text-base-content;
  /* 手动添加核心主题变量，确保全局工具类调用时生效 */
  --primary: #EF3054;
  --secondary: #C67F43;
}

此时直接用@apply调用DaisyUI工具类，会自动使用自定义主题的样式：

.card__button {
  @apply bg-secondary text-white px-4 py-2 rounded;
}

3. 验证配置有效性 #

• 运行Tailwind编译命令，检查生成的CSS文件中是否包含自定义主题的颜色值
• 移除HTML上的data-theme属性，查看页面是否应用了自定义的light主题样式

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