edb066e0aa
This PR updates all of our gradient utilities to interpolate using OKLCH by default instead of sRGB. This results in a smoother transition between colors that preserves saturation throughout the gradient, rather than hitting the dreaded dull gray zone in between your color stops. Here are a few examples comparing sRGB (top) to OKLCH (bottom): <img width="736" alt="image" src="https://github.com/user-attachments/assets/57a158b6-a3a2-4eda-813e-1b596c7d4b3a"> We only apply a default interpolation mode when _not_ using arbitrary values with the gradient utility. Simplified but clear: ```css .bg-linear-to-r { background-image: linear-gradient(to right in oklch, var(--gradient-color-stops)); } .bg-linear-[to_right] { background-image: linear-gradient(to right, var(--gradient-color-stops)); } .bg-linear-[to_right_in_hsl] { background-image: linear-gradient(to right in hsl, var(--gradient-color-stops)); } ``` --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com> |
||
|---|---|---|
| .. | ||
| @tailwindcss-cli | ||
| @tailwindcss-node | ||
| @tailwindcss-postcss | ||
| @tailwindcss-standalone | ||
| @tailwindcss-upgrade | ||
| @tailwindcss-vite | ||
| internal-example-plugin | ||
| tailwindcss | ||
| tsconfig.base.json | ||