Переключение темного режима в CSS Tailwind не работает в старых браузерах

В настоящее время я работаю над проектом, использующим Tailwind CSS для стилизации, и я реализовал функцию переключения темного режима. Переключатель отлично работает в последней версии Chrome, но не работает в более старых версиях (например, Chrome 87 на Android).

При переключении в темный режим ожидаемое поведение заключается в применении классов темного режима, таких как dark:bg-slate-900, но в старых браузерах сохраняются классы светлого режима (например, 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"
  }
}

Как заставить темный и светлый режим работать в старых браузерах?

🤔 А знаете ли вы, что...
React предлагает виртуальное DOM для оптимизации производительности при обновлении интерфейса.

[РЕШЕНО]Перейти к решению

323

Reactjs73808 вопросов Tailwind css724 вопроса Vite486 вопросов Postcss109 вопросов Tailwind 311 вопросов

Ответ:

Решено

В Tailwind v3.3+ селекторы правил CSS для вариантов классов dark: с darkMode: 'class'генерируются с помощью псевдокласса :is() . Могу ли я использовать… отчеты, которые поддерживаются в Chrome для Android, начиная с версии 121 и Отчеты MDN, поддержка Chrome для Android начиная с версии 88. В любом случае именно такое использование :is() может быть причиной того, что варианты классов dark: не влияют на Chrome для Android версии 87.

Чтобы обойти эту совместимость, вы можете рассмотреть:

Понижение версии Tailwind до версии 3.2. Однако имейте в виду, что любые функции версии 3.3, которые вы можете использовать, перестанут работать.
Имейте какой-нибудь плагин PostCSS, который работает после Tailwind и преобразует использование :is() в какой-либо другой совместимый CSS, например, с помощью :match() или :-webkit-any().
Используйте собственный вариант с помощью плагина Tailwind, который эмулирует darkMode: 'class' селекторы CSS в версиях Tailwind старше v3.3 или в которых используются :match() или -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 &)']);
    })
  ]
}
```
Однако имейте в виду, что вам придется заменить все экземпляры варианта dark: именем пользовательского варианта, объявленного в плагине Tailwind (daak: в приведенном выше примере).

Переключение темного режима в CSS Tailwind не работает в старых браузерах

Ответ:

Интересные вопросы для изучения