This PR adds support for specifying a color interpolation method for all gradient utilities using a modifier:
<div class="bg-linear-to-r/oklab">
Supported bare values are any valid color space keyword, as well as the special keywords shorter, longer, increasing, and decreasing, which are shortcuts for in oklch {keyword} hue.
Arbitrary values are also supported and are used as-is, so the in keyword is not automatically included for you:
<div class="bg-linear-to-r/[in_oklab]">
Modifiers are not supported when using arbitrary values for the actual gradient, as it's expected that your arbitrary gradient value contain all of the details you want in your gradient:
<!-- Won't work -->
<div class="bg-linear-[to_right]/oklab">
<!-- Do this -->
<div class="bg-linear-[to_right_in_oklab]">
Resolves https://github.com/tailwindlabs/tailwindcss/issues/14955, but it may still be wise to make oklab the default since I do sort of agree with the poster there that most people probably expect a gradient between two colors to sort of just "fade" between them rather than interpolate between them around the color wheel.
This PR adds support for specifying a color interpolation method for all gradient utilities using a modifier:
Supported bare values are any valid color space keyword, as well as the special keywords
shorter,longer,increasing, anddecreasing, which are shortcuts forin oklch {keyword} hue.Arbitrary values are also supported and are used as-is, so the
inkeyword is not automatically included for you:Modifiers are not supported when using arbitrary values for the actual gradient, as it's expected that your arbitrary gradient value contain all of the details you want in your gradient:
Resolves https://github.com/tailwindlabs/tailwindcss/issues/14955, but it may still be wise to make
oklabthe default since I do sort of agree with the poster there that most people probably expect a gradient between two colors to sort of just "fade" between them rather than interpolate between them around the color wheel.