I am working on a react project with the tailwind. I checked the inspection of Chrome and saw the same tailwinds variables multiple times. I thought maybe something is not working properly in our project and checked Shopify and it was the same, I wonder why it is working in this way?
Screenshots are taken from first page of Shopify



Why does Tailwind declare CSS variables multiple times?
There are Tailwind CSS default variables defined for ::backdrop in a separate rule from the *, ::before, ::after rule for two reasons:

The *, ::before, ::after selector does not cover ::backdrop. As per tailwindlabs/tailwindcss#8526:

This PR adds the ::backdrop pseudo-element to our universal default rules, which fixes an issue where utilities like backdrop:backdrop-blur would not work because the variables that rule depended on were not defined.


As for why it is in a separate rule, it could be due to browser support. According to MDN, the last major web browser to support ::backdrop was Safari 15.4 which was released on March 14th 2022. The aforementioned pull request tailwindlabs/tailwindcss#8526 was merged on June 6th 2022 and released with v3.1.0 on June 8th 2022.
This means at that time, only very recent Safari browsers would have support for the ::backdrop element. If ::backdrop would be with the *, ::before, ::after rule selector as *, ::before, ::after, ::backdrop, this would break sites on older Safari browsers, since the *, ::before, ::after, ::backdrop rule would not apply since one of the components were not supported. This could be a major regression so they separated out the ::backdrop selector into its own rule in pull request #8567 that was released in v3.1.1.


