Dark Mode Toggle in Tailwind CSS not working in older browsers

Question

I'm currently working on a project using Tailwind CSS for styling, and I've implemented a dark mode toggle feature. The toggle works perfectly in the latest version of Chrome but it doesn't work in older versions (e.g., Chrome 87 on Android).

When toggling to dark mode, the expected behavior is to apply dark mode classes like dark:bg-slate-900, but in older browsers, it keeps the light mode classes (e.g. bg-gray-50).

// tailwind.config.cjs
module.exports = {
 future: {
 hoverOnlyWhenSupported: true,
 },
 content: [
 "./index.html",
 "./src/**/*.{js,ts,jsx,tsx}",
 ],
 darkMode: "class",
}

// Dark mode toggle logic
useEffect(() => {
 if (
 localStorage.getItem("theme") === "dark" ||
 localStorage.getItem("theme") === null
 ) {
 document.documentElement.style.backgroundColor = "#0f172a";
 document.documentElement.classList.add("dark");
 } else {
 document.documentElement.style.backgroundColor = "#fcfefc";
 document.documentElement.classList.remove("dark");
 }
}, [theme]);

// postcss.config.cjs
module.exports = {
 plugins: {
 tailwindcss: {},
 autoprefixer: {},
 },
}

package.json file
{
 "name": "decker",
 "private": true,
 "version": "0.0.0",
 "type": "module",
 "scripts": {
 "dev": "vite",
 "build": "tsc && vite build",
 "preview": "vite preview"
 },
 "dependencies": {
...
 },
 "devDependencies": {
 "autoprefixer": "^10.4.13",
 "postcss": "^8.4.31",
 "tailwindcss": "^3.3.4",
 "typescript": "^5.1.3",
 "vite": "5.0.12",
 "vite-plugin-pwa": "^0.17.4"
 }
}

How do I make dark and light mode work in older browsers as well?

• Wongjn: What version of Tailwind are you running?
• Max Vhanamane: I am using Tailwind version 3.3.4.

Answer 1

With Tailwind v3.3+, the selectors of CSS rules for dark: variant classes with darkMode: 'class' are generated with the :is() pseudo class. Can I use... reports this was supported in Chrome for Android starting from version 121 and MDN reports Chrome for Android support starting from version 88. Either way, this :is() usage would be why dark: variant classes have no effect on Chrome for Android version 87.

To work around this compatibility you could consider:

• Downgrading Tailwind to v3.2. Though do be aware of any v3.3 features you may be using will stop working.
• Have some PostCSS plugin that runs after Tailwind that converts :is() usage to some other CSS that is compatible, such as by using :match() or :-webkit-any().
• Use a custom variant via a Tailwind plugin that emulates darkMode: 'class' CSS selectors in Tailwind versions older than v3.3 or that use :match() or -webkit-any():

  const plugin = require('tailwindcss/plugin')
  module.exports = {
   // ...
   plugins: [
   plugin(function({ addVariant }) {
   // Tailwind v3.2 dark behavior.
   addVariant('daak', '.dark &');
   // OR
   // Using `:match()`.
   addVariant('daak', [':match(.dark &)', ':is(.dark &)']);
   // OR
   // Using `:-webkit-any()`.
   addVariant('daak', [':-webkit-any(.dark &)', ':is(.dark &)']);
   })
   ]
  }
  

  Though do be aware you'd need to replace all instances of dark: variant with the name of the custom variant declared in the Tailwind plugin (daak: in the above example).

• Max Vhanamane: After downgrading the Tailwind version to 3.2.7, toggling between dark and light themes worked on Chrome 87 (Android). I didn't face any issues because I wasn't using any new features or classes. Thanks.