Removing/reducing unused --tw css custom variables

[jpduckwo]

Hi, the tw base applies a lot of CSS custom variables to '*, :before, :after'. I notice that for me, most of these don't even have a value. It results in the calculated styles on an element becoming a giant list of defined variables and then all those inherited variables for every parent. I'm wondering if there is a way to only include the minimum --tw-variables, or only apply them at the root rather than every element and pseudo-element?

I understand that perhaps the tw functionality relies on them to be defined on every element, and if that's the case, how can they be reduced?

I have tried disabling the corePlugins for some of those variables, however, they still seem to be defined.

For one element's listed styles you get a huge list in the styles repeating this over and over for all elements...

etc etc

[wongjn]

You could set experimental.optimizeUniversalDefaults to true in your Tailwind configuration:

module.exports = {
  experimental: {
    optimizeUniversalDefaults: true,

[adamwathan]

You might find this article I wrote a few years ago interesting:

https://adamwathan.me/composing-the-uncomposable-with-css-variables/

It explains in detail how the empty variable stuff works and what we use it for 👍 We have to set it on every single element (*) rather than :root because CSS variables are inherited, and we need to make sure that they are reset for every element otherwise you get unexpected results.

Consider a simplified example of some of what Tailwind does:

* {
  --tw-translate-x: ;
  --tw-translate-y: ;
}

.translate-x-4 {
  --tw-translate-x: translateX(1rem);
  transform: var(--tw-translate-x) var(--tw-translate-y);
}

.translate-y-8 {
  --tw-translate-x: translateX(2rem);
  transform: var(--tw-translate-x) var(--tw-translate-y);
}

Now consider this markup:

<div class="translate-x-4">
  <!-- ... -->
        <!-- Somewhere way deeper... -->
        <div class="translate-y-8">...</div>
  <!-- ... -->
</div>

If we set the variables on :root, the value of --tw-translate-x would be inherited from the parent, and that deeply nested element would get translate horizontally by 1rem even though you didn't add the translate-x-4 class. So we set the values on * to make sure --tw-translate-x gets cleared for each element so you're always starting from a clean slate.

In v4 we're using the new @property feature in CSS which supports defining variables that don't inherit, so we don't have to define those variables on every element, but it's a very modern feature and would be a breaking change to introduce for v3. It's actually more CSS too because the declarations are a bit verbose, but it is a more robust/correct solution.

Generally I wouldn't worry about actually trying to reduce this stuff — even though it's applied to every element it only appears once in your CSS file. The optimizeUniversalDefaults flag that @wongjn mentioned will probably actually result in a slightly bigger CSS file, but does make sure that fewer elements are targeted which can help with an edge case rendering performance issue we discovered in Safari on pages with a huge number of DOM nodes (like 7000 or more).

[jpduckwo]

Excellent, thank you so much for the robust explanation and tips!

[danon]

If you're using purgeCss, remember to safelist :host and :root, since variables are often declared in :host, :root which obviously does not appear in the source-code, so purgeCss will remove variable declarations.