[v4] All built-in Tailwind CSS vars are added to the theme :root even when they are not used #15673
-
I'm trying Tailwind CSS v4.0.0-beta.9 in an app. The prod build includes all the built-in CSS vars in the :root even when my app is not using them, whicih increases my CSS file by ~14 KB compared to Tailwind CSS v3. I see that there is a way to override an entire namespace, but how do we add back all the ones that we want to use without exhaustively adding each and every var back? Is there a way to include only the CSS vars that are used in the app? |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 1 reply
-
the same |
Beta Was this translation helpful? Give feedback.
-
I am currently using https://github.com/tomasklaen/postcss-prune-var to remove unused CSS variables, which works reasonably well, but I am also hoping there will be built-in support to optimize the variables and maybe even the property definitions. |
Beta Was this translation helpful? Give feedback.
-
Yeah I'm also curious about this, tailwind v4 has doubled my file size because of all the vars. |
Beta Was this translation helpful? Give feedback.
Efforts are underway to reduce the amount of CSS variables, see: