Backdrop variables are declared (?) multiple times

[kadoshms]

What version of Tailwind CSS are you using?

3.4.15

What build tool (or framework if it abstracts the build tool) are you using?

Vite (6.0.1)
PostCSS (8.4.49)

What version of Node.js are you using?

For example: v20.17.0

What browser are you using?

For example: Chrome

What operating system are you using?

macOS

Reproduction URL

https://github.com/kadoshms/tailwind-reproduce-vars-issue

Describe your issue

Seems like the global before and after variable declarations being declared multiple times.
I am actually not sure if this is a true issue with Tailwind or with the Devtools console itself, but this obviously makes debugging harder and adds a lot of clutter to the computed styles.

[RobinMalfait]

Hey!

This is just a weird representation in devtools. If you look at the generated CSS (in the <style> block in the browser or in the dist/assets/*.css file when running npm run build) then it only shows once.

The reason it is shown is because the selector is defined as * which applies to every element. What happens is that these variables are defined for each element, if you then look at <div> it will show its CSS variables, but it will also show its CSS variables inherited by parent elements.

In your screenshot you can see that it has Inherited from div#root as a little header above the crossed-out variables.

So long story short, this is nothing to worry about.

If you really don't like it, one thing you can try is to set the optimizeUniversalDefaults experimental feature flag:

diff --git a/tailwind.config.js b/tailwind.config.js
index 63bbd69..14af99a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,ts,tsx}"],
+  experimental: {
+    optimizeUniversalDefaults: true
+  },
   theme: {
     extend: {},
   },

This will make sure to not use the *, *:before, *:after for the variables, but instead us the actual classes where the variables are being used.

More info in the original PR: #4850

Hope this helps!

[kadoshms]

Thanks @RobinMalfait !