Next.js中Tailwind CSS与Daisy UI自定义渐变不生效问题排查

目标渐变样式：

background: linear-gradient(180deg, rgba(192, 192, 192, 0.04) 0%, rgba(201, 180, 180, 0.04) 54.5%, rgba(0, 0, 0, 0.04) 100%);

问题根源 #

你的配置和代码存在4个关键错误：

• 模板字符串语法错误：定义backgroundImage时用了双引号"，但模板字符串需要用反引号`，导致${theme()}变量无法被解析，生成的CSS完全无效。
• 渐变语法错误：${theme('left-panel-bg2')})处多了一个闭合括号)，直接破坏了linear-gradient的结构。
• 自定义颜色作用域问题：你把left-panel-bg1/2/3仅放在darkTheme配置里，只有切换到深色主题时才能访问这些颜色值；当前为浅色主题时，theme('left-panel-bg2')会返回undefined，导致渐变失效。
• 组件className引号未闭合：<div className="bg-custom-gradient></div>缺少结尾的双引号，类名无法被正确识别。

修正后的配置与代码 #

1. 调整Tailwind配置 #

将自定义颜色同步到两个主题中（或根据需求分别配置），修复模板字符串和渐变语法：

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  daisyui: {
    themes: [
      {
        lightTheme: {
          'primary': '#757575',
          'base-100': '#FFFFFF',
          'secondary': '#b0cfff',
          'base-content': '#e0e0e0',
          'base': '#f0f0f0',
          'success': '#aee5c8',
          'warning': '#ffcc99',
          'error': '#ff9999',
          // 浅色主题下的自定义渐变颜色
          'left-panel-bg1': 'rgba(192, 192, 192, 0.04)',
          'left-panel-bg2': 'rgba(201, 180, 180, 0.04)',
          'left-panel-bg3': 'rgba(0, 0, 0, 0.04)',
        },
        darkTheme: {
          'primary': '#3670FF',
          'secondary': '#DD5587',
          'neutral': '#2a323c',
          'success': '#62d993',
          'warning': '#ff993a',
          'error': '#fc3c3b',
          // 深色主题下的自定义渐变颜色（可按需调整）
          'left-panel-bg1': 'rgba(192, 192, 192, 0.04)',
          'left-panel-bg2': 'rgba(201, 180, 180, 0.04)',
          'left-panel-bg3': 'rgba(0, 0, 0, 0.04)',
        },
      }
    ],
  },
  theme: {
    extend: {
      backgroundImage: (theme) => ({
        // 使用反引号作为模板字符串，修复渐变结构
        'custom-gradient': `linear-gradient(180deg, ${theme('left-panel-bg1')} 0%, ${theme('left-panel-bg2')} 54.5%, ${theme('left-panel-bg3')} 100%)`,
      }),
    }
  },
  plugins: [require("daisyui")],
};
export default config;

2. 修正组件代码 #

补全className的闭合引号：

<div className="bg-custom-gradient"></div>

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