如何在Next.js中使用TypeScript定制DaisyUI主题？

问题出在你没有完整继承Retro主题的所有配置项，只是覆盖了部分自定义变量。在TypeScript配置中，需要显式扩展DaisyUI的Retro主题，而不是从零构建自定义主题。

以下是正确的tailwind.config.ts配置方案：

import type { Config } from 'tailwindcss';
import daisyui from 'daisyui';

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    // 自定义Tailwind原生样式（比如圆角）
    borderRadius: {
      'custom': '2rem',
      // 保留Tailwind默认圆角，避免完全覆盖
      ...require('tailwindcss/defaultTheme').borderRadius,
    },
    extend: {
      // 自定义颜色，会与DaisyUI主题颜色合并
      colors: {
        'custom-accent': '#ff6b6b',
      },
    },
  },
  plugins: [daisyui],
  daisyui: {
    themes: [
      {
        // 基于Retro主题扩展的自定义主题
        my-retro: {
          // 完整继承Retro主题的所有配置（包括背景色、文字色等）
          ...require('daisyui/src/theming/themes')['retro'],
          // 覆盖或添加自定义变量
          primary: '#ff4500',
          secondary: '#32cd32',
          // 如需调整背景色，可在这里单独修改，否则保留Retro默认值
          // 'base-100': '#f8f4e3',
        },
      },
      // 可选：保留DaisyUI默认主题
      'light',
      'dark',
    ],
    // 设置默认使用自定义的Retro衍生主题
    theme: 'my-retro',
  },
};

export default config;

关键说明： #

1. 完整继承主题：通过...require('daisyui/src/theming/themes')['retro']把Retro主题的所有变量（包括base-100背景色、文字色等）导入到自定义主题中，避免丢失原有样式。
2. 优先级控制：自定义变量写在继承语句之后，会覆盖Retro主题的对应变量，其他未覆盖的变量则保留原主题值。
3. Tailwind原生样式：如果要自定义圆角这类Tailwind原生属性，建议通过theme或theme.extend设置，同时可以保留默认样式（如示例中的...require('tailwindcss/defaultTheme').borderRadius），避免完全覆盖默认值。

如果需要TypeScript类型提示，安装@types/daisyui即可获得主题变量的自动补全：

npm install @types/daisyui --save-dev

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