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.
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.