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

[Anonymous]

Tailwindcss недавно выпустил основную обновленную версию 4. Одним из основных изменений является то, что он больше не использует файл tailwind.config.js , и вместо этого вся конфигурация управляется с помощью одного файла CSS: TailWindcss обновления. Большую часть времени новый метод конфигурации довольно прост. Тем не менее, есть кое -что, что я не мог сделать до сих пор. < /P>
Я обычно хочу полностью отключить темный режим. По этой причине я делал это в прошлом в моем файле конфигурации: < /p>

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

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

Это полностью игнорируют любые классы тьмы: при компиляции. Согласно официальной документации, Dark Mode теперь работает с использованием CSS-предпочитаемой функции CSS-scheme носителя, но нет особого руководства в том, как ее отключить. Затем, если я не добавляю класс Dark в дереве DOM, темный режим отключен, но это похоже на неуклюжие решение. При компиляции файла CSS все классы и стили для Dark Mode все еще существуют, тогда как мое предыдущее решение с файлом конфигурации JavaScript опущены. Я знаю, что логическое решение будет заключаться в том, чтобы просто удалить любые классы тьмы: , но я предпочитаю работать так, потому что я использую некоторые компоненты третьей части и плагины, которые всегда заставляют темный режим на основе системных предпочтений. Следовательно, у моего основного веб -сайта нет темного режима, но конкретные компоненты делают рендеринг в темном режиме, что делает его менее визуально приятным. Я ценю любое руководство. Я пытаюсь использовать следующий код для чего-то простого: < /p>

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

< /code>
< /div>
< /div>
< /p>
Можно просмотреть сгенерированные CSS на левой вкладке в нижней части. Любой подобный код не должен быть скомпилирован с соответствующим файлом конфигурации: < /p>


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

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