使用 Tailwind CSS 和 Daisy UI 的自定义渐变

Question

我正在尝试使用 Tailwind CSS 和 Daisy UI 将自定义渐变添加到我的 next.js 应用程序。

这就是我要补充的。

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%);

我尝试过自定义渐变。

//Tailwind CSS 配置

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',
        }
      ,
      {
        darkTheme: {
          'primary': '#3670FF',
          'secondary': '#DD5587',
          'neutral': '#2a323c',
          'success': '#62d993',
          'warning': '#ff993a',
          'error': '#fc3c3b',
          // Custom colors
          '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('primary')} 0%, 
${theme('left-panel-bg2')}) 54.5%, ${theme('left-panel-bg3')} 100%)",
      }),
    }
  },
  plugins: [require("daisyui")],
};
export default config;

我在组件中使用了渐变。

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

但这不起作用。

让我知道问题是什么。

谢谢！

Answer 1

我认为最好的方法是在 tailwind 配置之外的常量中定义颜色，特别是因为我认为不可能从 daisyUI 插件获取值到 tailwind 中，反之亦然：

import type { Config } from 'tailwindcss'

const COLORS = {
  lightTheme: {
    primary: '#757575',
    'base-100': '#FFFFFF',
    secondary: '#b0cfff',
    'base-content': '#e0e0e0',
    base: '#f0f0f0',
    success: '#aee5c8',
    warning: '#ffcc99',
    error: '#ff9999'
  },
  darkTheme: {
    primary: '#3670FF',
    secondary: '#DD5587',
    neutral: '#2a323c',
    success: '#62d993',
    warning: '#ff993a',
    error: '#fc3c3b',
    // Custom colors
    '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)'
  }
}

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: COLORS.lightTheme.primary,
          'base-100': COLORS.lightTheme['base-100'],
          secondary: COLORS.lightTheme.secondary,
          'base-content': COLORS.lightTheme['base-content'],
          base: COLORS.lightTheme.base,
          success: COLORS.lightTheme.success,
          warning: COLORS.lightTheme.warning,
          error: COLORS.lightTheme.error
        },
        darkTheme: {
          primary: COLORS.darkTheme.primary,
          secondary: COLORS.darkTheme.secondary,
          neutral: COLORS.darkTheme.neutral,
          success: COLORS.darkTheme.success,
          warning: COLORS.darkTheme.warning,
          error: COLORS.darkTheme.error,
          // Custom colors
          'left-panel-bg1': COLORS.darkTheme['left-panel-bg1'],
          'left-panel-bg2': COLORS.darkTheme['left-panel-bg2'],
          'left-panel-bg3': COLORS.darkTheme['left-panel-bg3']
        }
      }
    ]
  },
  theme: {
    extend: {
      backgroundImage: {
        'custom-gradient': `linear-gradient(180deg, ${COLORS.darkTheme.primary} 0%, ${COLORS.darkTheme['left-panel-bg2']} 54.5%, ${COLORS.darkTheme['left-panel-bg3']} 100%)`
      }
    }
  },
  plugins: [require('daisyui')]
}

export default config