Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add mix-blend-mode and background-blend-mode utilities #3920

merged 3 commits into from Apr 4, 2021


Copy link

@adamwathan adamwathan commented Apr 3, 2021

This PR adds support for the mix-blend-mode and background-blend-mode properties.

Here's the API:

Class CSS
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 the mixBlendMode and backgroundBlendMode keys in your tailwind.config.js file.

Copy link

codecov-io commented Apr 3, 2021

Codecov Report

Merging #3920 (27bce5c) into master (21a96af) will increase coverage by 0.02%.
The diff coverage is 100.00%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #3920      +/-   ##
+ Coverage   86.85%   86.87%   +0.02%     
  Files         315      317       +2     
  Lines        4259     4268       +9     
  Branches      788      788              
+ Hits         3699     3708       +9     
  Misses        485      485              
  Partials       75       75              
Impacted Files Coverage Δ
jit/corePlugins/index.js 90.32% <ø> (ø)
src/corePluginList.js 100.00% <ø> (ø)
stubs/defaultConfig.stub.js 100.00% <ø> (ø)
jit/corePlugins/mixBlendMode.js 100.00% <100.00%> (ø)
src/plugins/mixBlendMode.js 100.00% <100.00%> (ø)

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 21a96af...27bce5c. Read the comment docs.

Copy link

neupauer commented Apr 4, 2021

Hi, nice work.

Have you thought about syntax like mix-blend-* and similar for background-blend-mode syntax like bg-blend-*?

Links (see section Available Utilities):

Copy link
Member Author

adamwathan commented Apr 4, 2021

Yeah valid suggestion — my goal is always to keep the names as short as possible without being ambiguous which is why I settled on names like mix-multiply but I need to come up with names for background-blend-mode and you're right that might influence this 🤔

My thinking was just mix-multiply and bg-multiply, but the bg-* namespace is definitely starting to get crowded. I think you might be right that mix-blend-* and bg-blend-* are the better names even though they are quite verbose. They won't be used very often though so that's probably okay 👍🏻

I'll update this PR — would you be interested in adding background-blend-mode to get some credit in the git history? If not I can add it myself today or tomorrow.

Copy link
Member Author

adamwathan commented Apr 4, 2021

Actually looks like GitHub makes it easy to add co-authors now, I'll get this in right now and add you as a co-author on the commit ❤️

Co-Authored-By: Peter Neupauer <>
@adamwathan adamwathan changed the title Add mix-blend-mode utilities Add mix-blend-mode and background-blend-mode utilities Apr 4, 2021
Co-Authored-By: Peter Neupauer <>
Copy link

neupauer commented Apr 4, 2021

Actually looks like GitHub makes it easy to add co-authors now, I'll get this in right now and add you as a co-author on the commit ❤️


@adamwathan adamwathan merged commit 1cb060d into master Apr 4, 2021
2 checks passed
@adamwathan adamwathan deleted the mix-blend-mode-utilities branch Apr 4, 2021
neupauer added a commit to neupauer/tailwindcss-plugin-blend-mode that referenced this pull request Apr 4, 2021
adamwathan added a commit that referenced this pull request May 7, 2021
* Add mix-blend-mode utilities

* Rename mix-blend-mode utilities to `mix-blend-*`

Co-Authored-By: Peter Neupauer <>

* Add `background-blend-mode` utilities

Co-Authored-By: Peter Neupauer <>

Co-authored-by: Peter Neupauer <>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
None yet

Successfully merging this pull request may close these issues.

None yet

3 participants