Shopify Question posted in
The Shopify help center can be found here.

Shopify – Why does Tailwind declare CSS variables multiple times?

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 Shopifyenter image description here

enter image description here
enter image description here

Tags:

2

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    Add this to your tailwind.config.js:

    module.exports = {
    //..
    experimental: {
        optimizeUniversalDefaults: true
    },
    //...
}

    And it won’t generate the variable bloat

    This is an experimental feature, but it does help with output file size and browser rendering performance.

    P.S. I saw this advice on Tailwind’s github, coming from Adam himself. Can’t remember where exactly. But I use it in all our projects and works fine.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search