tailwindcss

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

Go to file

Add radial and conic gradient utilities (#14467 )

This PR adds new `bg-radial-*` and `bg-conic-*` utilities for radial and
conic gradients. It also adds support for "arbitrary gradients", where
gradient utilities like `bg-linear-*`, `bg-radial-*`, and `bg-conic-*`
can now accept a complete gradient definition as their arbitrary value.

## Radial gradients

Radial gradients are created with the `bg-radial` utility, or the
`bg-radial-[…]` utility, combined with the existing `from-*`, `via-*`,
and `to-*` utilities.

The simple `bg-radial` utility just creates a radial gradient with no
position information, which defaults to `center`:

```
radial-gradient({from}, {via}, {to});
```

If you use the arbitrary value format, whatever you provide as the
arbitrary value is inserted into the first position:

```
radial-gradient({arbitrary value}, {from}, {via}, {to});
```

So a utility like `bg-radial-[at_top_left]` would produce this:

```
radial-gradient(at top left, {from}, {via}, {to});
```

This makes it possible to use some of the `radial-gradient(…)` features
that this PR doesn't add first class support for, like using values like
`circle at center` or providing a specific interpolation color space
like `in hsl longer hue`. We may add explicit APIs for these in the
future, but I'm proposing this PR first since those changes would be
purely additive and none of the decisions here would create any conflict
with those APIs.

## Conic gradients

Conic gradients are created with the `bg-conic`,
`bg-conic-{bareNumber}`, and `bg-conic-[…]` utilities, combined with the
existing `from-*`, `via-*`, and `to-*` utilities.

The `bg-conic` utility creates a conic gradient with no angle, which
defaults to `0deg`:

```
conic-gradient({from}, {via}, {to});
```

The `bg-conic-{bareNumber}` utilities create conic gradients using the
bare number as the angle:

```
conic-gradient(from {bareNumber}deg, {from}, {via}, {to});
```

The `bg-conic-[…]` arbitrary value utilities insert whatever you provide
as the arbitrary value into the first position verbatim:

```
conic-gradient({arbitraryValue}, {from}, {via}, {to});
```

So a utility like `bg-conic-[from_45deg_in_hsl]` would produce this:

```
conic-gradient(from 45deg in hsl, {from}, {via}, {to});
```

Note that the `from` keyword needs to be provided by the user when using
arbitrary values, but not when using bare values.

This makes it possible to use some of the `conic-gradient(…)` features
that this PR doesn't add first class support for, like using values like
`at 0 0` or providing a specific interpolation color space like `in hsl
longer hue`. We may add explicit APIs for these in the future, but I'm
proposing this PR first since those changes would be purely additive and
none of the decisions here would create any conflict with those APIs.

## Arbitrary gradients

Prior to this PR, utilities like `bg-linear-[…]` could only accept
positional information as their arbitrary value, like
`bg-linear-[to_top_right]`. All of the color stops could only be
provided using the `from-*`, `via-*`, and `to-*` utilities.

If you wanted to provide the complete gradient in one class, you needed
to use `bg-[…]` and write out the gradient function yourself:


```html
<div class="bg-[linear-gradient(to_right,var(--color-red-500),var(--color-yellow-400))]">
```

This PR refactors some things internally to make it possible to provide
the entire gradient as the arbitrary value to each background gradient
utility, like this:

```html
<div class="bg-linear-[to_right,var(--color-red-500),var(--color-yellow-400)]">
```

This is nice if you're doing something very custom and you want to be
able to look at the whole value together, while still avoiding some of
the boilerplate you'd have if you had to write out the entire gradient
function yourself.

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>

2024-09-20 10:34:54 -04:00

.github

Increase CI timeouts for Windows intergarion tests

2024-09-12 15:41:07 +02:00

crates

Release v4.0.0-alpha.24 (#14395 )

2024-09-12 16:10:56 +02:00

integrations

Add CSS codemods for migrating @tailwind directives (#14411 )

2024-09-18 22:40:23 +02:00

packages

Add radial and conic gradient utilities (#14467 )