I’m hoping when Elements switches to tailwind 4, Tailwind will build in class mode as opposed to media mode. So we can have runtime toggle dark / light mode component / custom code in the browser.
Unless I’m missing something there is no way to toggle dark / light mode at runtime in the browser the way Elements currently builds Tailwind?
Didn’t know there was versions of tailwind…. New to me…
I thought there was just ‘tailwind’ 
Going to read up on it…
Just for information…
Looks very promising!!! 10x faster builds!!!
More if interested:
Current Status
· Tailwind CSS v3 is the current stable production version (latest is v3.4.x)
· Tailwind CSS v4 is in early development/preview - not ready for production use
Key Differences (Based on Announced Plans)
Tailwind v4 is being rebuilt using the Oxc (Oxford Compiler) written in Rust, which promises:
· 10x faster build times (the biggest pain point in v3)
· Better performance and caching
· More reliable parsing
· v3: Requires configuration file (tailwind.config.js)
· v4: Aims to work with zero configuration out of the box
· You can still customize, but it’s no longer required
· v4 will leverage modern CSS features like @scope and native cascade layers
· Better integration with CSS ecosystem
· More standards-compliant output
· Updated color palette and design tokens
· More modern defaults
· Better dark mode support built-in
· May see changes in how Tailwind is packaged and distributed
· Potential for more modular installation
What Will Likely Stay the Same
· Utility-first approach remains core philosophy
· All existing utility classes will be supported
· Plugin system will continue to work
· Backwards compatibility is a priority for the team
Should You Use Tailwind v4 Now?
No, not for production projects. It’s still in alpha/preview.
Stick with Tailwind v3 for:
· Production applications
· Client projects
· Anything that needs stability
Consider experimenting with v4 for:
· Personal projects
· Learning about upcoming changes
· Testing performance improvements
How to Prepare
Bottom Line
Tailwind v4 is primarily about performance improvements and developer experience, not about breaking changes or new paradigms. The core utility-first approach that made Tailwind popular remains intact.
When v4 releases, it will likely be a welcome upgrade rather than a disruptive rewrite.
I’m also waiting for the Tailwind 4 implementation in Elements as there are still bugs which @ben promised to remove with the Tailwind 4 implementation.
If that enables runtime toggle between dark/light mode in the browser - even better. I would like that feature!
It’s HIGH on the list, but right now, we’re 100% focused on getting the built-in store launched first.
But don’t worry, we will get round to the v4 upgrade, it’s much more involved than just hitting “update” and we want to be sure we have the time to dedicate to doing it properly.
Feel free to hassle us again, once the store is out and stable 
This is a bit old
Just to clarify: this isn’t something that’s tied specifically to Tailwind 4. Tailwind 3 already supports runtime theme switching using class-based dark mode — it works by applying a dark class to the <body> element.
However, in Elements, we chose (for a variety of reasons) to implement automatic dark/light mode detection based on the user’s system preference, using the media strategy.
That said, we absolutely plan to add support for a client-side theme switcher in the future. It’s something we know users are keen on, and it would open up more flexibility for building dynamic, user-controlled experiences.