Access default variables after 4.0.5

[WarningImHack3r]

Since #16211 is out in 4.0.5, one of my components is broken, and there doesn't seem to be a workaround. Let me explain.

I'm using a Svelte component I created to display in the corner of the screen the current screen size and the matching Tailwind breakpoint, during development. I'm also displaying a dropdown menu that uses screen sizes exposed by Tailwind to show all the user-defined and default screen sizes.

In v3, I just had to use the good old resolveConfig, and parse theme screens.

In v4 (4.0.0-4.0.4), I now use client-side computed CSS, as recommended per the docs, to get all the screens.
However, tree-shaking the unused variables makes it now impossible for me to reach the default breakpoints. The static option prevents the user-defined breakpoints from being tree-shaken away, but the (not used) default variables seem to be gone forever.

Is there a way to get around my issue in 4.0.5? If not, I can see the following options:

• Add another option for an even stricter @theme static mode that reverts to pre-4.0.5
• Add the ability to give options to @import "tailwindcss"; to be able to pass it static too (@import "tailwindcss" static;)
• Keep all variables during development
• Something else?

Thanks

[wongjn]

You can tag the tailwindcss/theme import with theme(static) like:

-@import "tailwindcss";
+@layer theme, base, components, utilites;
+
+@import "tailwindcss/theme" layer(theme) theme(static);
+@import "tailwindcss/preflight" layer(base);
+@import "tailwindcss/utilities" layer(utilities);

[WarningImHack3r]

That was fast, thank you!