tailwindcss

mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00

History

Interpolate gradients using OKLCH by default (#14708 )

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>

2024-10-17 16:16:14 -04:00

@tailwindcss-cli

Release v4.0.0-alpha.27 (#14671 )

2024-10-15 10:28:34 +00:00

@tailwindcss-node

Release v4.0.0-alpha.27 (#14671 )

2024-10-15 10:28:34 +00:00

@tailwindcss-postcss

Add first draft of new wide-gamut color palette (#14693 )

2024-10-16 15:24:53 -04:00

@tailwindcss-standalone

Release v4.0.0-alpha.27 (#14671 )