Change how we handle defaults (optimized or not)

[thecrypticace]

What's changing

Only emit defaults when using base layer

The always-on defaults layer has now been removed. It was a good idea in theory but in practice it has become a source of issues and is a maintenance burden. It has been moved back to being included with the base layer.

As a result of this you must include @tailwind base to get default variables.

Emit plugin defaults regardless of usage

The previous behavior was to only emit defaults for used utilities. We now emit defaults for every core plugin / utility regardless of it's usage. This is a minor increase in file size but results in a more consistent and predictable behavior across the board for different users of tailwind.

Optimize universal defaults no longer works without @tailwind base

This was the original behavior of optimize universal defaults. It was changed in an attempt to work with isolated CSS modules. This was however a bit of a hack. The problem is that we can't necessarily know how user's are using CSS modules – either with @tailwind base or without because they're compiled in isolation without knowledge of any other files used.

Our recommendation for users of CSS modules is the following:

1. Do not enable experimental.optimizeUniversalDefaults
2. Include a global stylesheet that uses @tailwind base.
3. Together with the "Emit plugin defaults regardless of usage" change above should allow these to work in all cases.

The default border color has been moved back to preflight

The border color plugin was previously changed to move the default border color from preflight to the border color plugin. This was a reasonable idea but meant that disabling preflight still produced a default border color which can be unexpected (like in #6923).

Default borders no longer work with the legacy border-opacity-* utilities

These utilities have been deprecated since we released v3. They still "work" but are discouraged. We suggest you use the new border-{color}/{opacity} modifiers introduced in v3.0 instead. For example the following border border-opacity-25 becomes border border-gray-200/25.

Removes variable reads from defaults

We had defaults like --tw-transform whose only real purpose was to make the usage of the utilities smaller. However this has some performance implications in Safari and have removed them in attempt to fix it. As a nice side effect it also makes the list of defaults look much cleaner.

Am I affected?

You should only be affected by this change if one of the following is true:

1. You are using CSS modules without a global @tailwind base layer
2. You are using legacy border-opacity-25 utilities on default border colors.
3. You are using the experimental optimizeUniversalDefaults flag. Note that experimental features are subject to change at any time.