Add mix-blend-mode
and background-blend-mode
utilities
#3920
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 adds support for the
mix-blend-mode
andbackground-blend-mode
properties.Here's the API:
mix-blend-normal
mix-blend-mode: normal
mix-blend-multiply
mix-blend-mode: multiply
mix-blend-screen
mix-blend-mode: screen
mix-blend-overlay
mix-blend-mode: overlay
mix-blend-darken
mix-blend-mode: darken
mix-blend-lighten
mix-blend-mode: lighten
mix-blend-color-dodge
mix-blend-mode: color-dodge
mix-blend-color-burn
mix-blend-mode: color-burn
mix-blend-hard-light
mix-blend-mode: hard-light
mix-blend-soft-light
mix-blend-mode: soft-light
mix-blend-difference
mix-blend-mode: difference
mix-blend-exclusion
mix-blend-mode: exclusion
mix-blend-hue
mix-blend-mode: hue
mix-blend-saturation
mix-blend-mode: saturation
mix-blend-color
mix-blend-mode: color
mix-blend-luminosity
mix-blend-mode: luminosity
bg-blend-normal
background-blend-mode: normal
bg-blend-multiply
background-blend-mode: multiply
bg-blend-screen
background-blend-mode: screen
bg-blend-overlay
background-blend-mode: overlay
bg-blend-darken
background-blend-mode: darken
bg-blend-lighten
background-blend-mode: lighten
bg-blend-color-dodge
background-blend-mode: color-dodge
bg-blend-color-burn
background-blend-mode: color-burn
bg-blend-hard-light
background-blend-mode: hard-light
bg-blend-soft-light
background-blend-mode: soft-light
bg-blend-difference
background-blend-mode: difference
bg-blend-exclusion
background-blend-mode: exclusion
bg-blend-hue
background-blend-mode: hue
bg-blend-saturation
background-blend-mode: saturation
bg-blend-color
background-blend-mode: color
bg-blend-luminosity
background-blend-mode: luminosity
Only
responsive
variants are enabled by default, but can be configured under themixBlendMode
andbackgroundBlendMode
keys in yourtailwind.config.js
file.