So deaktivieren Sie den Dunklen Modus in Rückenwindcss 4 ⇐ JavaScript

[Anonymous]

tailwindcsss kürzlich veröffentlicht ein Major, das auf Version 4 aktualisiert wurde. Eine der Hauptänderungen besteht darin, dass sie keine Datei tailwind.config.js verwendet, und stattdessen wird die gesamte Konfiguration über eine einzelne CSS -Datei verwaltet: TailwindcSS -Upgrade -Handbuch. Meistens ist die neue Konfigurationsmethode ziemlich einfach. Es gibt jedoch etwas, das ich bisher nicht tun konnte. Aus diesem Grund habe ich dies in der Vergangenheit in meiner Konfigurationsdatei getan: < /p>


">

Code: Select all

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

Diese würden beim Kompilieren jede Dunkelheit vollständig ignorieren: Klassen. Nach der offiziellen Dokumentation funktioniert der Dark-Modus nun mit der CSS-Funktion der CSS-Feature Medien in Medien bevorzugt, aber es gibt keine spezifische Anleitung, wie sie deaktiviert werden sollen. Wenn ich die Klasse Dark im DOM -Baum nicht hinzufüge, ist der Dark -Modus deaktiviert, aber dies fühlt sich wie eine klobige Lösung an. Beim Kompilieren der CSS -Datei sind noch alle Klassen und Stile für den Dunklen Modus vorhanden, während meine vorherige Lösung mit der JavaScript -Konfigurationsdatei diese weggelassen hat. Ich weiß, dass die logische Lösung darin besteht, nur alle Dunkelheit zu entfernen: Klassen, aber ich entscheide mich, so zu arbeiten, da ich einige Komponenten und Plugins von Drittenteil verwende, die den Dunkel -Modus immer basierend auf den Systemeinstellungen erzwingen. Daher hat meine Hauptwebsite keinen dunklen Modus, aber die spezifischen Komponenten rendern im dunklen Modus, was sie weniger visuell angenehm macht. Ich schätze jede Anleitung. < /P>
Der offizielle Spielplatz von Tailwind CSS könnte zum Testen verwendet werden. Ich habe versucht, den folgenden Code für etwas Einfaches zu verwenden: < /p>

Code: Select all

< /code>
< /div>
< /div>
< /p>
Es ist möglich, die generierten CSS in der unteren linken Registerkarte zu überprüfen. Ein solcher Code sollte nicht mit der entsprechenden Konfigurationsdatei kompiliert werden: < /p>