Skip to content

Commit

Permalink
Support specifying gradient interpolation method via modifier (#14984)
Browse files Browse the repository at this point in the history
This PR adds support for specifying a color interpolation method for all
gradient utilities using a modifier:

```html
<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:

```html
<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:


```html
<!-- Won't work -->
<div class="bg-linear-[to_right]/oklab">

<!-- Do this -->
<div class="bg-linear-[to_right_in_oklab]">
```

Resolves #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.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
  • Loading branch information
adamwathan and adamwathan authored Nov 13, 2024
1 parent a8b99f7 commit 13f05e2
Show file tree
Hide file tree
Showing 4 changed files with 908 additions and 102 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Added

- Support opacity values in increments of `0.25` by default ([#14980](https://github.com/tailwindlabs/tailwindcss/pull/14980))
- Support specifying the color interpolation method for gradients via modifier ([#14984](https://github.com/tailwindlabs/tailwindcss/pull/14984))

## [4.0.0-alpha.33] - 2024-11-11

Expand Down
Loading

0 comments on commit 13f05e2

Please sign in to comment.