Как отключить темный режим в TailwindCSS 4 ⇐ CSS

[Anonymous]

TailwindCSS недавно выпустил крупное обновление до версии 4. Одним из основных изменений является то, что он больше не использует файл Tailwind.config.js, а вместо этого вся конфигурация управляется с помощью одного файла CSS: Руководство по обновлению TailwindCSS. В большинстве случаев новый метод настройки довольно прост. Однако кое-что мне до сих пор не удалось сделать.
Обычно я хочу полностью отключить темный режим. По этой причине я раньше делал это в своем файле конфигурации:

Код: Выделить всё

module.exports = {
darkMode: false, // Disable dark mode
theme: {
extend: {},
},
plugins: [],
}

Они полностью игнорируют любые классы dark: при компиляции. Согласно официальной документации, темный режим теперь работает с использованием медиа-функции CSS «prepres-color-scheme», но конкретных указаний по ее отключению нет.
Я нашел пример переопределения функциональности по умолчанию с помощью этой строки в новом файле конфигурации CSS: @custom-variant dark (&:where(.dark, .dark *));. Затем, если я не добавлю класс dark в дерево DOM, темный режим отключится, но это выглядит неуклюжим решением. При компиляции файла CSS все классы и стили для темного режима все еще присутствуют, тогда как в моем предыдущем решении с файлом конфигурации JavaScript они были исключены.
Как правильно настроить новый файл конфигурации CSS для полного отключения темного режима? Я знаю, что логичным решением было бы просто удалить все классы dark:, но я предпочитаю работать именно так, потому что использую некоторые сторонние компоненты и плагины, которые всегда принудительно включают темный режим в зависимости от системных предпочтений. Следовательно, на моем основном веб-сайте нет темного режима, но определенные компоненты отображаются в темном режиме, что делает его менее привлекательным визуально. Буду признателен за любые советы.
Для тестирования можно использовать официальную игровую площадку Tailwind CSS. Я пытаюсь использовать следующий код для чего-то простого:

Код: Выделить всё

Сгенерированный CSS можно просмотреть на нижней левой вкладке. Любой подобный код не следует компилировать с соответствующим файлом конфигурации:

Код: Выделить всё

.dark\:bg-green-400 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-green-400);
}
}

Подробнее здесь: https://stackoverflow.com/questions/794 ... lwindcss-4