Purge layers
by default, deprecate conservative
mode
#2288
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 introduces a new
layers
mode to the PurgeCSS configuration, and makes it the default, deprecating the existingconservative
mode.When configured manually, it looks like this:
It allows you to tell Tailwind which layers it should purge (base, components, and/or utilities). The old
conservative
mode was the equivalent of this:Now that we've added the
preserveHtmlElements
option and default it totrue
, I feel like it's safe to purge all layers by default.It's important to note that this will only purge rules that are explicitly stored in a
layer
, which is rules that are added by a plugin, or rules that are added via custom CSS but explicitly wrapped in a@layer
at-rule:This PR makes
@layer
a real public API, whereas before it was sort of private.You can still use
mode: 'all'
to purge all of your CSS, including custom CSS and any third party CSS:Overall, the goal of this PR is to standardize on some fundamental terminology and core concepts, as well as to purge more aggressively now that it's safe to do thanks to
preserveHtmlElements
.Purging using the new
layers
mode by default is behind afuture
flag calledpurgeLayersByDefault
. Without enabling that flag, the mode will beconservative
by default, and the user will see a warning that that mode has been deprecated.One other thing worth noting (that will affect nobody really) is that prior to this PR, any custom CSS wrapped in a
@responsive
at-rule was automatically considered part of theutilities
layer. This is no longer the case — anything without an explicit layer simply has no layer and won't be considered for purging without settingmode
toall
. The only side effect of this is that you might have a slightly larger production CSS file by default now, because your custom utilities that used@responsive
were being purged by the "conservative" mode before and are not being purged by the "conservative" mode now.You can fix this by just wrapping any custom utilities in
@layer utilities { ... }
: