Why does Tailwind declare CSS variables multiple times?

Question

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

Answer 1

There are Tailwind CSS default variables defined for ::backdrop in a separate rule from the *, ::before, ::after rule for two reasons:

1. 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.

2. 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 14^th 2022. The aforementioned pull request tailwindlabs/tailwindcss#8526 was merged on June 6^th 2022 and released with v3.1.0 on June 8^th 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.