Referencing other variables not working

[codeflow-lab]

I am making custom theme, with some variables.

@theme {
--color-*: initial;
}

:root {
--primary: oklch(0.72 0.24 55);
--primary-dark: oklch(0.65 0.28 52);
}

[data-theme="dark"] {
--primary: oklch(0.78 0.20 58);
--primary-dark: oklch(0.72 0.24 55);
}

@theme inline {
--color-gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

Test and result

Doesnt Work

Doesnt Work

if i use text-gradient in class => Doesnt work

.text-gradient {
@apply bg-gradient-primary;
/* background: var(--color-gradient-primary); */
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}

if i uncomment the variable part and comment @apply then work

It doesnt work with linear-gradient

If i write without it then work

@theme inline {
--color-gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); <---- this doesnt work
--color-gradient-primary: var(--primary); <--- this works
}

[wongjn]

Seems to be working in this Tailwind Play which would suggest it is something particular to your project. Consider providing a git repo that reproduces the unexpected behavior.

Though I would say linear-gradient() is not a <color> value, but a <gradient> type. So it isn't exactly valid for the --color-* namespace. You'd want to use the --background-image namespace instead: https://play.tailwindcss.com/IPEajJ6r8L?file=css

[codeflow-lab]

Thanks, that was exactly the problem that beginner like me didnt notice about the difference in background-color and background-image.

As you said this worked perfectly

@theme inline {
--background-image-gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}