I’m attempting to incorporate a unique gradient into my next.js application with the help of Tailwind CSS and Daisy UI.
Below is the specific code snippet I plan on using:
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’ve been experimenting with this custom gradient:
//Tailwind CSS configuration
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 attempted to apply the gradient within the component.
<div className="bg-custom-gradient"></div>
Unfortunately, it isn’t functioning as expected.
Please advise me on what could be causing this issue.
Thank you!