Replies: 2 comments 1 reply
-
Hey! Check out this previous discussion here: #13828 TL;DR is the behavior is very different if we set them on In v4 we're able to use |
Beta Was this translation helpful? Give feedback.
-
Thank you for the quick response @adamwathan! Am I right in thinking the Even though I don't use CSS modules or Vue style blocks, I'm leaning against enabling this in production due to the experimental label. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
What version of Tailwind CSS are you using?
For example: v3.4.13
What build tool (or framework if it abstracts the build tool) are you using?
N/A
What version of Node.js are you using?
N/A
What browser are you using?
Latest Chrome
What operating system are you using?
Windows
Reproduction URL
https://play.tailwindcss.com/, no modifications needed
Describe your issue
👋 Hi all.
First off I'd like to thank y'all for tailwind. I really love using it.
While diagnosing performance problems on a closed-source app I develop, I realized that
@base
is adding a host of css variables to the*
selector. I'm confused why it's targeted this way instead of :root.I think targeting
*
is an issue for css variables in particular because it appears to redefine the variable at every single node. That's why when inspecting any element on the page and looking at the variable definitions, you'll often see dozens of overriden definitions. Not only is this noisy, but I've measured a significant performance impact toRecalculate Styles
in Chrome Devtools.Performance impact details
It's likely a different level of impact for every app, but I'm measuring around a ~2.5x hit to Recalculate Styles on Tailwind Play. The closed-source app I develop involves a page with a supidly large number of DOM elements and has a larger impact. It likely scales with the depth of nodes. See the attached screenshots for traces I took on Tailwind Play with the css vars applied to
*
vs.:root
.Repro steps: do the below steps for both default and after modifying the css var initialization selector to
:root
.Applied to star (current behavior)

Applied to root

Request for advice
I'm considering manually injecting the required css variables to
:root
to solve these issues instead of using@base
.Do y'all think that's an ok workaround? Are there things I should be wary of?
Beta Was this translation helpful? Give feedback.
All reactions