Remove need for filter
and backdrop-filter
toggles
#4611
Merged
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 makes the same changes as #4604, but for the
filter
andbackdrop-filter
utilities. Like that PR, this only targets the JIT engine due to minor breaking changes.It makes all of the individual filter and backdrop-filter classes like
brightness-*
,saturate-*
,backdrop-contrast-*
,backdrop-blur-*
, etc. work without the need for using thefilter
orbackdrop-filter
classes to "enable" them.How it works
This works by adding two new rules targeting the universal (
*
) selector to thebase
layer that look like this:Then each individual filter-related class looks something like this:
Breaking changes
The primary breaking change here is that the
filter
andbackdrop-filter
utilities are now dependent on the@tailwind base
layer because of where we inject the universal rule. If you are only using@tailwind utilities
(probably because you don't want to use our reset styles), the transforms will stop working.The solution is to make sure you do include
@tailwind base
, but explicitly disable our preflight styles if you don't want those:/* Your custom existing CSS here... */ + @tailwind base; @tailwind utilities;
Aside from that, the main thing to understand is that there are no
filter
orbackdrop-filter
classes anymore, so any authoring patterns that relied on being able to use those to enable filters will break.For example, if you were conditionally adding the
filter
class using JS while leaving classes likeblur-lg
applied permanently, that will no longer work:Instead you would need to conditionally apply the actual transformations:
Another example is if you were using the
filter
class to manually reset every filter to their default value at a specific breakpoint (instead of just usingfilter-none
you fucking animal). I would be shocked if anyone is doing this in a real project in the wild:Instead you should write this: