Struggling with CSS custom properties overriding in a large utility-first CSS framework
I've searched everywhere and can't find a clear answer. After trying multiple solutions online, I still can't figure this out... I've been struggling with this for a few days now and could really use some help... During development of a new feature for an academic publication site, I've run into a perplexing issue with CSS custom properties not behaving as expected. We're using Tailwind CSS v2.2.19, and I’m trying to implement a dynamic color scheme that adjusts based on user preferences. Specifically, I have a set of variables defined for light and dark modes: ```css :root { --primary-color: #3490dc; --secondary-color: #ffed4a; } [data-theme='dark'] { --primary-color: #1d4ed8; --secondary-color: #fbbf24; } ``` The intention is to switch these properties based on a toggle in the UI. However, it seems like the Tailwind classes are overriding my custom properties. For example, applying a class like `bg-primary` doesn’t reflect the variable value when the theme is toggled. I’ve tried various combinations of `!important` in the utility classes, but it feels like a band-aid solution. My current setup includes: ```html <button id="theme-toggle">Toggle Theme</button> <div class="bg-primary text-white"> Content goes here </div> ``` In my JavaScript, the toggle function looks like this: ```javascript const toggleButton = document.getElementById('theme-toggle'); toggleButton.addEventListener('click', () => { document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark' ); }); ``` I've explored adding custom classes to handle the theme change more directly, but that compromises the utility-first approach of Tailwind, which I’m keen on maintaining. Additionally, the inconsistency across browsers, particularly Safari, is causing me more headaches. Anyone who has tackled a similar problem or can suggest a better approach to ensure the custom properties reflect correctly in Tailwind’s class system? Thanks in advance for any guidance! I'm working on a API that needs to handle this. Has anyone else encountered this? This is part of a larger application I'm building. What's the best practice here? My development environment is Linux.