How to add a gradient color in daisyui custom theme colors?

Question

I have the following taiwlind.config.js file and I have added daisyui on top of tailwind, now I want to create a custom theme but I am not sure how can I add a gradient color instead of a normal color,

import daisyui from "daisyui";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        paragraph: "#C5C6C8",
      },
    },
  },
  daisyui: {
    themes: [
      {
        myDark: {
          primary: "#f59e0b",
          secondary: "#facc15",
          accent: "#f3f4f6",
          neutral: "#0E1014",
          "base-100": "#171b22",
          info: "#55c3f2",
          success: "#a2d92b",
          warning: "#fee94e",
          error: "#ce2a27",
        },
      },
      "cmyk",
    ],
  },
  plugins: [daisyui],
};

I want to have the primary color as a gradient color for example:

primary: "linear-gradient(to right, red, blue)"

is that possible to do? or is there any way around it?

I have tried using this:

primary: "linear-gradient(to right, red, blue)"

but it did not work.

score 1 · Accepted Answer · answered Jul 01 '23 at 18:29

A gradient cannot be used as a color in CSS and thus would not work as a Daisy UI color. This is because colors and gradients are two different data types within CSS. For example:

p {
  color: red;
}

is valid CSS, whereas

p {
  color: linear-gradient(to right, red, green);
}

is invalid CSS, because color only accepts the <color> value type.

How to add a gradient color in daisyui custom theme colors?

1 Answers1