a Custom Gradient with Tailwind CSS and Daisy UI

Question

I am trying to add a custom gradient to my next.js app using Tailwind CSS and Daisy UI.

This is what I am going to add.

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

I tried for the custom gradient.

//Tailwind CSS config

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;

I used the gradient in the component.

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

But it doesn't work.

Let me know what the problem is.

Thank you!

Answer 1

I think the best would be to define the colors in a constant outside the tailwind config, especially because I don't think is possible to get values from the daisyUI plugin into tailwind, and vice-versa:

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)'
  }
} as const

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