Color looks grey instead of blue #42129
Description
I can't think of a better title :(
Describe the bug:
<!DOCTYPE html>
<html>
<head>
<style>
@property --tw-gradient-from {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-to {
syntax: "<color>";
inherits: false;
initial-value: #0000;
}
@property --tw-gradient-stops {
syntax: "*";
inherits: false;
}
@property --tw-gradient-from-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 0%;
}
@property --tw-gradient-to-position {
syntax: "<length-percentage>";
inherits: false;
initial-value: 100%;
}
.bg-gradient-to-r {
--tw-gradient-position: to right in oklab;
background-image: linear-gradient(var(--tw-gradient-stops));
}
.from-blue-500 {
--tw-gradient-from: oklch(62.3% 0.214 259.815);
--tw-gradient-stops: var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
}
.to-blue-600 {
--tw-gradient-to: oklch(54.6% 0.245 262.881);
}
.test-button {
padding: 10px 20px;
color: white;
border: none;
border-radius: 9999px;
}
</style>
</head>
<body>
<button class="test-button bg-gradient-to-r from-blue-500 to-blue-600">Exact Tailwind v4 pattern</button>
<button style="
--tw-gradient-from: oklch(62.3% 0.214 259.815);
--tw-gradient-to: oklch(54.6% 0.245 262.881);
--tw-gradient-stops: var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%;
background-image: linear-gradient(var(--tw-gradient-stops));
padding: 10px 20px;
color: white;
border: none;
border-radius: 9999px;
margin-top: 10px;
">Without @property rules</button>
</body>
</html>Platform:
All