About css variables for *, ::after, ::before

[ryomahan]

Hi everyone, I was bored and found this set of css variables(as shown) introduced after import tailwindcss by postcss. What is their purpose and can I hide these variables?

Yesterday crswll answer me: They're mostly used for composing properties. What do you mean by "hide" exactly? Just not see them in devtools or do you want them stripped from the output?

And now I have new questions:

Because of the *, these css cariables are attached to all classes, causing me to be distracted by a huge list of identical css variables when I look at css properties in chrome devtools. So I'd like to hide theme in chrome devtools, or just remove theme on output(if they won't paly a critical role).

By the way, what is "composing properties", are there some example, are there examples of situations in which these variables would be used.

[adamwathan]

Hey! This blog post explains how we use variables like this in some detail:

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

[ryomahan]

After discussions between crswll and me on Discord, I understand how it works, but such a implementation pose a problem: Because of the *, these css cariables are attached to all classes, causing me to be distracted by a huge list of identical css variables when I look at css properties in chrome devtools.

[ryomahan]

[ryomahan]

it prevents me from viewing the css of the parent element on chrome devtools

[mrdulin]

Same issue. These variables took up so much space that I had to scroll down several times to find the target CSS

[adamwathan]

They are necessary for Tailwind to work, so not really anything we can do here. Usually they are at the very bottom of dev tools though with any actual styles further up so it’s not common to have to scroll past them unless you are looking for user agent styles or have some other non-Tailwind CSS in your project.

But yeah nothing we can do here I’m afraid. In v4 we use the new @property feature of CSS which always shows up at the very bottom of dev tools, but browser support isn’t good enough to use that for v3.

[acemtp]

The real question is why on your tailwind website and doc (that seems to use tailwind) you don't have those floody *, ::after, ::before blocks?

[ryomahan]

Sorry, I didn't understand what you were saying.

[ryomahan]

* means every el, so you can see this css var define block in every el's style by browser's devtools.

[acemtp]

If you inspect an el in the https://tailwindcss.com page, for example the button get started

Unlike my app made with tailwind (and what other people are saying above), in the dev tool, you don't see all the --tw variables block in all *, ::after, ::before of all the parents.

[ArseniyXaoc]

The real question is why on your tailwind website and doc (that seems to use tailwind) you don't have those floody *, ::after, ::before blocks?

Haven't found a solution how to remove variables?