Tailwind CSS Blend Mode Plugin
This plugin adds utilities to use blend-modes with Tailwind CSS.
Installation
Add this plugin to your project:
# Install using pnpm
pnpm install --save-dev tailwindcss-blend-mode
# Install using npm
npm install --save-dev tailwindcss-blend-mode
# Install using yarn
yarn add -D tailwindcss-blend-mode
Usage
// tailwind.config.js
{
theme: {}, // no options to configure
variants: { // all the following default to ['responsive']
mixBlendMode: ['responsive'],
backgroundBlendMode: ['responsive'],
isolation: ['responsive'],
},
plugins: [
require('tailwindcss-blend-mode')(), // no options to configure
],
}
.blend-normal { mix-blend-mode: normal; }
.blend-multiply { mix-blend-mode: multiply; }
.blend-screen { mix-blend-mode: screen; }
.blend-overlay { mix-blend-mode: overlay; }
.blend-darken { mix-blend-mode: darken; }
.blend-lighten { mix-blend-mode: lighten; }
.blend-color-dodge { mix-blend-mode: color-dodge; }
.blend-color-burn { mix-blend-mode: color-burn; }
.blend-hard-light { mix-blend-mode: hard-light; }
.blend-soft-light { mix-blend-mode: soft-light; }
.blend-difference { mix-blend-mode: difference; }
.blend-exclusion { mix-blend-mode: exclusion; }
.blend-hue { mix-blend-mode: hue; }
.blend-saturation { mix-blend-mode: saturation; }
.blend-color { mix-blend-mode: color; }
.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; }
.isolation-isolate { isolation: isolate; }
.isolation-auto { isolation: auto; }
Not working on Tailwind CSS 1.1.4
Installed via npm, then added to plugins:
But no classes are rendered in the final output of the CSS in dev (not production)
Using Tailwind CSS 1.1.4
Bump tailwindcss from 2.2.19 to 3.2.3
Bumps tailwindcss from 2.2.19 to 3.2.3.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
757a8d6
update changelog6166e59
3.2.38a2f9ed
Fix !important selectors not being classified as valid class inside safelist ...6bd9912
Only sort pseudo elements after classes when using@apply
and variants (#9765)aac468c
Pick up changes from files that are both context and content deps (#9787)1f5d117
Fix shadowed variable when using raw content (#9773)48c0dca
Update eslint to version 8.26.0763fdde
3.2.2a5b6ec2
update changelog260e392
Update cssnano to version 5.1.14Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump tailwindcss from 2.2.19 to 3.2.2
Bumps tailwindcss from 2.2.19 to 3.2.2.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
763fdde
3.2.2a5b6ec2
update changelog260e392
Update cssnano to version 5.1.1430d2595
Update autoprefixer to version 10.4.13226be11
update changelogaa979d6
ensure we fallback to''
for backwards compatibility reasonsbf28bf6
Fix cannot read properties of undefined (reading 'modifier') (#9656)0a4ae77
Fix not rebuilding files whenrename
event is emit (#9689)d33b650
Fix incorrect selectors when using@apply
in selectors with combinators and...c10ba4e
Fix fractional values not being parsed properly inside arbitrary properties (...Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump tailwindcss from 2.2.19 to 3.2.1
Bumps tailwindcss from 2.2.19 to 3.2.1.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
547f9f6
3.2.18967a51
update changelog726b023
update changelog0bbca33
ensure we also check wether the modifier exists in the modifiers object1445aaf
Ensuremicromatch
is a proper CLI dependency (#9620)3c7fc69
Workflow improvements (#9609)40f6b4f
Fix missing PostCSS dependencies in the CLI (#9617)4dfb1e3
Fix missingsupports
in types (#9616)2faf86f
Resolve broken relative logo sources on npmjs (relative → absolute) (#9610)1dc4a76
increase jest test timeoutDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump tailwindcss from 2.2.19 to 3.2.0
Bumps tailwindcss from 2.2.19 to 3.2.0.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
642c5c8
3.2.0269d737
update changelogc179f71
Update CHANGELOG.md7f73608
Improve warning messages (#9608)ea5b11c
Update README to usepicture
/source
syntax to avoid deprecation (#9606)0c2c179
use properCSS
casing08a7321
update chagnelogcb6e45a
Prepare for release (#9605)ddb9b4d
ensureDEFAULT
is taken into account formatchVariant
(#9603)24fc365
Automatically trigger Tailwind Play PRs on release (#9601)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump jest from 28.1.3 to 29.1.2
Bumps jest from 28.1.3 to 29.1.2.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
... (truncated)
Commits
3c31dd6
v29.1.2fd9cd90
v29.1.151f1030
v29.1.077f865d
v29.0.3616fcf5
v29.0.2132e815
chore: update to TypeScript 4.8 (#13177)b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.6Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump jest from 28.1.3 to 29.1.1
Bumps jest from 28.1.3 to 29.1.1.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
... (truncated)
Commits
fd9cd90
v29.1.151f1030
v29.1.077f865d
v29.0.3616fcf5
v29.0.2132e815
chore: update to TypeScript 4.8 (#13177)b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.5Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump jest from 28.1.3 to 29.0.3
Bumps jest from 28.1.3 to 29.0.3.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
... (truncated)
Commits
77f865d
v29.0.3616fcf5
v29.0.2132e815
chore: update to TypeScript 4.8 (#13177)b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.598a833b
v29.0.0-alpha.40998187
v29.0.0-alpha.3Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump jest from 28.1.3 to 29.0.2
Bumps jest from 28.1.3 to 29.0.2.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
... (truncated)
Commits
616fcf5
v29.0.2132e815
chore: update to TypeScript 4.8 (#13177)b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.598a833b
v29.0.0-alpha.40998187
v29.0.0-alpha.302cd85f
chore: migrate fromlerna
tolerna-lite
(#13097)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump jest from 28.1.3 to 29.0.1
Bumps jest from 28.1.3 to 29.0.1.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
Commits
b959a3d
v29.0.186de0cb
chore: updatejest-runner-tsd
(#13179)75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.598a833b
v29.0.0-alpha.40998187
v29.0.0-alpha.302cd85f
chore: migrate fromlerna
tolerna-lite
(#13097)10f1e7f
v29.0.0-alpha.16862afb
v29.0.0-alpha.0Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump jest from 28.1.3 to 29.0.0
Bumps jest from 28.1.3 to 29.0.0.
Release notes
Sourced from jest's releases.
... (truncated)
Changelog
Sourced from jest's changelog.
Commits
75006e4
v29.0.04def94b
v29.0.0-alpha.663e506b
v29.0.0-alpha.598a833b
v29.0.0-alpha.40998187
v29.0.0-alpha.302cd85f
chore: migrate fromlerna
tolerna-lite
(#13097)10f1e7f
v29.0.0-alpha.16862afb
v29.0.0-alpha.071441df
chore: drop node 12 and 14 (#13033)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)Bump tailwindcss from 2.2.19 to 3.2.4
Bumps tailwindcss from 2.2.19 to 3.2.4.
Release notes
Sourced from tailwindcss's releases.
... (truncated)
Changelog
Sourced from tailwindcss's changelog.
... (truncated)
Commits
f2f1ee9
3.2.413eb1e2
update changelog22d45dd
Update CHANGELOG.md602101d
Allow users to block generation of certain utilities (#9812)4ccc0fa
Make sure errors are always displayed when watching for changes (#9810)1482c75
Fix watching of files on Linux when renames are involved (#9796)757a8d6
update changelog6166e59
3.2.38a2f9ed
Fix !important selectors not being classified as valid class inside safelist ...6bd9912
Only sort pseudo elements after classes when using@apply
and variants (#9765)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)