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
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 likebackdrop: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
.