Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces two new core plugins:
backgroundImage
gradientColorStops
TL;DR, together they allow you to easily compose custom gradients on the fly, directly in your HTML:
They can even be combined with the new
backgroundClip
utilites to do cool text gradient effects:The
backgroundImage
pluginThe
backgroundImage
plugin is a pretty vanilla core plugin that just bakes in support for thebackground-image
property, letting you add whatever values you want:By default we include 8 background image values, mapping to common linear gradient directions:
This generates classes like
bg-gradient-to-t
,bg-gradient-to-br
, etc.I considered a lot of options for these class names but ultimately decided on this convention for a few reasons:
gradient
because we don't shorten words anywhere else (we either use the full word or an acronym, never something likegrad
)to
becausebg-gradient-t
is not clear to me — my mind thinks it's a gradient starting from the top, not ending at the topt
,tr
,l
,bl
, etc. to match the border-radius classes and keep things short, since those conventions are already known by Tailwind usersUnder the hood these classes are very simple, and all of the real magic lives in the
gradientColorStops
plugin that generates the--gradient-color-stops
custom property.By default, only
responsive
variants are generated:The
gradientColorStops
pluginThe
gradientColorStops
plugin uses a clever custom-property-based implementation to support composable gradients, very similar to how we support composable transforms.It is configured under the
gradientColorStops
key and by default uses your entire color palette:It generates three sets of classes using the following naming convention:
from-{color}
, for the gradient starting colorvia-{color}
, for the gradient mid colorto-{color}
, for the gradient ending colorThese classes work together to generate a final value for the
--gradient-color-stops
custom property that is used by the default set of background gradient utilities.So to create a gradient, you combine one of the background-image utilities, with 1-3 of these color stop utilities to produce the gradient you want on the fly, without pregenerating a combinatoric explosion of classes in advance:
By default,
responsive
,hover
, andfocus
variants are generated:These new utilities are implemented very carefully to support a handful of useful behaviors.
from
on its own fades to transparentIf you use a
from-{color}
utility on its own, theto
color defaults to transparent, so you fade to transparent without any extra classes.You might be familiar with a bug in Safari that makes fading to transparent very annoying: you can't simply fade to
transparent
, you have to fade to a fully transparent version of thefrom
color usingrgba
orhsla
syntax, otherwise things will look awful in Safari:Our implementation cleverly dodges that bug, by dynamically generating the right
to
color by parsing thefrom
color and generating the correctrgba
value for theto
color.Here's the definition for
from-blue-500
for example:Here,
rgba(66, 153, 225, 0)
is the perfectly transparent version of#4299e1
, so you can properly fade to transparent in Safari with no extra work.We only support this on
from
and notto
for technical reasons, if you'd like to fade from transparent to a color, simply reverse the direction of the gradient:from
andto
withoutvia
works with no extra CSSThe
via-{color}
utilities override the--gradient-color-stops
custom property to include a middle color stop, but if novia-{color}
utility is used, thefrom-{color}
utilities default to a two-stop value.So both of these just automatically work:
Here's the CSS for one of the
via
utilities:You can also fade
from
a color,via
a color, to transparent by leaving off theto
:Release strategy
These features introduce no breaking changes and will be part of the next minor release (v1.7).