Remove --tw- variables from universal selector

[vascoeduardo]

Hey everybody,

at the moment I'm facing a problem with tailwind variables that are declared in the universal selector *, :after, :before { }. The Problem is, that css variables in the universal selector seem to cause a super high CPU load on older iOS devices on every interaction(click, touch etc.). If I remove them from the universal selector, everything seems to be fine. My generated tailwind.css file has this universal selector:

*, :after, :before {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246/0.5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
}

Is it somehow possible to remove the variables declaration from the universal selector and move them to the specific class in which they are needed. I took a look at other tailwind.css files and it seems that it is somehow possible.

For example on tailwindcss.com only the --tw-content variable is declared in the universal selector:

:after,:before {
    --tw-content: ""
}

To demonstrate what the problem on iOS devices , I screen captured the CPU usage of a iPad mini with tailwind variables declared in the universal selector. What you see is what happens if a empty div is touched:

Screen.Recording.2022-02-03.at.16.53.39.mov

and here without the variables:

Screen.Recording.2022-02-03.at.16.57.26.mov

there is a huge difference in CPU usage so the website is barely usable because the interface is blocked for nearly 5 seconds

I hope somebody has an idea, what I am trying to achieve here.

[adamwathan]

Hey! Try this:

// tailwind.config.js
module.exports = {
  experimental: {
    optimizeUniversalDefaults: true
  }
  // ...
}

We tried to make this strategy the default for v3 but it's not compatible with CSS modules or component-specific styles in Svelte/Vue components so we had to revert to using the universal stuff by default.

We use that option on the tailwindcss.com site though, and as long as you are using Tailwind the recommended way (as just a simple boring global stylesheet without CSS modules or any other scoped styles that cause PostCSS to run multiple times in isolation) you should be good.

[adamwathan]

Hey! We can’t declare on root because then they would be inherited, and we need the values to start with their default for each element.

For example, if we set the defaults on root and one element had ring-blue-500, the ring variable wouldn’t be reset on any child elements so any child element setting any type of shadow would inherit the ring shadow which isn’t what you want.

[AndreasHeintze]

@adamwathan I had the same problem, so I did as you suggested and the variables where gone. I use Svelte, will there be a problem? Seems to work so far...

[mpalpha]

Perhaps making --tw-* variable defaults compatible with @layer or the ability to specify a custom selector could be a workable solution that would allow more flexibility for custom web components.

[wongjn]

The option does not remove all --tw but optimizes them down to used ones, see this Tailwind Play example (open the Generated CSS panel). Toggle the option to false in the Config tab to see the difference.

[djmtype]

@wongjn I had deleted my comment because I was wrong, and noticed that after the fact.

[bakura10]

Hi @adamwathan ,

I have tried this option, and I end up having some strange CSS, that I am not sure is expected. For instance, using the universal selector I end up with one selector like that:

And later another rule that simply seems to override it:

I am also using some components beyond utility, and I end up having those kind of strange selectors:

Is this the expected output of this option?

I feel a way better approach here would be to try to implement that: #8135 to strip down unused variables from both the generated selectors and the universal selectors. I think that most people do not even use half of those variables.

A very naive approach that would simply state for instance "if no sepia filter class is used in the whole codebase, then sepia variable is not outputted" would work I think.

[danielimmke]

As a tag up to this, I recently experienced an issue where the --tw-sepia variable was causing a rendering issue in Webkit, specifically. I don't know if the previous comment mentioning the sepia filter specifically is related, but I am posting it on this issue for posterity.

To fix it, I had to manually add --tw-sepia: unset to the specific container div. I've attached a video of the issue I was experiencing.

0913.mp4

[Inwerpsel]

Big universal rules are also pretty detrimental to the UX of dev tools, at least in chromium browsers. It shows up on every parent element of the selected element unnecessarily, completely striked through because that rule matches all lower elements. It makes the inspector view several times longer with pure garbage.

DevTools.-.www.meetup.com_devs-gent_.2024-10-17.15-53-53.mp4

In a deep DOM this gets really bad and also grinds the performance of dev tools to a halt as it renders thousands of pointless elements.

[djmtype]

Looking at your video, it appears like that's a production build rather than development, correct? If you're using a Vite project, in your config, try setting css: { devSourcemap: true }. Does that cut down any of the noise?

[Inwerpsel]

Yes, it's a production build, but not my own site, just the latest Tailwind site I came across (https://www.meetup.com/devs-gent/).

It's just an example though, for me all Tailwind sites with this rule look like this in the inspector.

I did try copy pasting the same CSS rule into my own project which does have source maps for CSS to test if it has any impact. It doesn't, the rule is still displayed in the same way, with the only difference being the file name linking to the actual source.

@djmtype Do you have an example where a source map improves this behavior?

[adamwathan]

Nothing we can do about this on our end unfortunately, would have to be a setting in Chrome itself to control whether they show inherited styles in dev tools or something :/

Good news is that in v4 we use @property instead of the universal selector since we are only targeting Safari >= 16.4, so this stuff all goes away.

Check the Headless UI website as an example:

https://headlessui.com/

[adamwathan]

Seems like this causing performance issues might be a new thing because of an optimization they tried to make in Chrome:

#14713

Going to try to escalate this today with my contacts there.

[Inwerpsel]

In my earlier message I was mostly referring to slow performance just due to the sheer amount of elements, but it's indeed likely that there are performance issues when using universal selector and custom properties.

In the Chromium commit linked in #14713, the following part of the description looks like it could be related.

To correctly have a unique StyleVariables data for each style
introduces has_own_*variables to keep track of the state.
(This is somewhat a bit manual which is unfortunate). This replaces
the HasOneRef call.

It seems very plausible that universal selectors don't play well with this change. If I'm reading it correctly, this should be true for every element once you start using a universal selector with custom properties. It's hard to tell from the Chromium code what would be the impact of this being true 100% of the time, but it feels like it probably breaks some optimization(s).

[djmtype]

@Inwerpsel PostCSS JIT Props might be worth trying.

By example: https://stackblitz.com/edit/github-7wftaw

Honestly, I think Tailwind v4 would be your best bet even if it's still in alpha. It really depends on your project's browser support requirements.

There's probably good reason why they were placed on the * selector originally due to the cascade, etc.

By adding JIT Props, you can place them within the :root, or back onto the *, ::before, ::after. The main difference is they would be opt in, so it should reduce the bloat. Just know, targeting *, ::before, ::after, could lead you back to square one.

Install PostCSS JIT Props.

Remove the --tw-* props entirely.

// tailwind.config.cjs
experimental: {
    optimizeUniversalDefaults: true
}

Now add the --tw-* props back in, on demand.

Create a postcss.config.cjs and dump the --tw-* props in there.

module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('postcss-jit-props')({
    '--tw-border-spacing-x': '0',
    '--tw-border-spacing-y': '0',
    '--tw-translate-x': '0',
    '--tw-translate-y': '0',
    '--tw-rotate': '0',
    '--tw-skew-x': '0',
    '--tw-skew-y': '0',
    '--tw-scale-x': '1',
    '--tw-scale-y': '1',
    '--tw-pan-x': ' ',
    '--tw-pan-y': ' ',
    '--tw-pinch-zoom': ' ',
    '--tw-scroll-snap-strictness': 'proximity',
    '--tw-gradient-from-position': ' ',
    '--tw-gradient-via-position': ' ',
    '--tw-gradient-to-position': ' ',
    '--tw-ordinal': ' ',
    '--tw-slashed-zero': ' ',
    '--tw-numeric-figure': ' ',
    '--tw-numeric-spacing': ' ',
    '--tw-numeric-fraction': ' ',
    '--tw-ring-inset': ' ',
    '--tw-ring-offset-width': '0px',
    '--tw-ring-offset-color': '#fff',
    '--tw-ring-color': 'rgb(59 130 246 / 0.5)',
    '--tw-ring-offset-shadow': '0 0 #0000',
    '--tw-ring-shadow': '0 0 #0000',
    '--tw-shadow': '0 0 #0000',
    '--tw-shadow-colored': '0 0 #0000',
    '--tw-blur': ' ',
    '--tw-brightness': ' ',
    '--tw-contrast': ' ',
    '--tw-grayscale': ' ',
    '--tw-hue-rotate': ' ',
    '--tw-invert': ' ',
    '--tw-saturate': ' ',
    '--tw-sepia': ' ',
    '--tw-drop-shadow': ' ',
    '--tw-backdrop-blur': ' ',
    '--tw-backdrop-brightness': ' ',
    '--tw-backdrop-contrast': ' ',
    '--tw-backdrop-grayscale': ' ',
    '--tw-backdrop-hue-rotate': ' ',
    '--tw-backdrop-invert': ' ',
    '--tw-backdrop-opacity': ' ',
    '--tw-backdrop-saturate': ' ',
    '--tw-backdrop-sepia': ' ',
    '--tw-contain-size': ' ',
    '--tw-contain-layout': ' ',
    '--tw-contain-paint': ' ',
    '--tw-contain-style': ' '
    }),
   require('autoprefixer')
  ]
}