React und Tailwind CSS | Dark-Modus in React

1. Einführung in den Kurs: Willkommen zu diesem Kurs, in dem wir darüber sprechen, wie Sie Tailwind-CSS mit React-Anwendungen nutzen können Tailwind-CSS mit React-Anwendungen nutzen Mein Name ist Fesel und ich freue mich, Sie durch die leistungsstarke Kombination von React - und Rückenwind-CSS zu führen die leistungsstarke Kombination von React - und Rückenwind-CSS Als Webentwickler und Dozent ich Lernenden wie Ihnen mit Leidenschaft dabei , saubere, effiziente und visuell beeindruckende Anwendungen zu entwickeln effiziente und visuell In der heutigen schnelllebigen Webentwicklungslandschaft ist die Erstellung responsiver, moderner Designs ohne Leistungseinbußen ein Muss Tailwind CSS mit seinem Utility-First-Ansatz ist ein entscheidender Faktor für das Styling Kombinieren Sie es mit den dynamischen Funktionen von Reacts und Sie haben das perfekte Toolkit, um eine Webanwendung in Produktionsqualität zu erstellen Nun, hier ist ein kleiner Einblick in das, was wir in diesem speziellen Kurs behandeln werden Sie beginnen also mit der Einführung in Tailwind CSS. Wir werden zuerst das nützliche Styling-System aufschlüsseln und Sie dann durch die Einrichtung eines einfachen HTML-Formulars führen, das Tailwind-CSS verwendet Dann werden wir uns mit responsivem Design und Theming in React befassen , und unsere Anwendung wird Rückenwind und Flexibilität nutzen, um Layouts zu erstellen, die auf jedem Bildschirm gut aussehen Und als Highlight unseres Kursprojekts werden Sie in React einen voll funktionsfähigen Schalter für den Dunkelmodus erstellen den Dunkelmodus Und dies wird Ihnen helfen, die Benutzererfahrung und die Ästhetik jeder Anwendung zu verbessern und die Ästhetik jeder Anwendung zu , die Sie in Zukunft erstellen Am Ende dieses Kurses werden Sie ein solides Verständnis dafür haben, wie Sie Tailwind-CSS in React integrieren können Tailwind-CSS in React um elegante, reaktionsschnelle Webanwendungen zu erstellen Jetzt lernen Sie nicht nur, wie, sondern auch warum, und stellen so sicher, dass Sie diese Fähigkeiten auf reale Projekte anwenden können diese Fähigkeiten auf reale Projekte Nun, für wen ist dieser Kurs gedacht? Egal, ob Sie ein Anfänger sind , der gerne etwas modernes Webdesign ausprobieren möchte, oder ein React-Entwickler, Ihren Arbeitsablauf optimieren möchte, dieser Kurs bietet für jeden etwas Wertvolles, Entwickler Und wenn ich alle sage, meine ich Entwickler aller Ebenen Egal, ob Sie ein Anfänger, ein Entwickler auf mittlerem Niveau oder ein fortgeschrittener Entwickler sind , dieser Kurs könnte perfekt für Sie sein , wenn Sie herausfinden möchten, wie Sie Ihre Webanwendung modernisieren können Bist du also bereit, die Kunst zu beherrschen, wunderschöne React-Anwendungen mit Tailwind-CSS zu erstellen ? Bin ich Lassen Sie uns eintauchen und gemeinsam etwas Tolles schaffen. Wir sehen uns im Kurs. 2. Die Macht von Tailwind CSS entfesseln: Ein Anfängerleitfaden: Jetzt ist es an der Zeit, dass wir anfangen zu sprechen Nun, was ist Tailwind-CSS ? Alles klar? Also würde ich euch alle bitten, Tailwind zu googeln, und ihr werdet das Tailwind-CSS dieser Website sehen Okay? Nun, Tailwind CSS ist ein Hilfsprogramm für das CSS-Framework, mit dem Sie benutzerdefinierte Designs sehr schnell erstellen können , indem Sie Klassen anwenden Okay? Nun, wenn Sie mit HTML vertraut sind, wissen Sie, dass HTML-Elemente hier drüben sind. Sie können ein paar HTML-Elemente sehen, okay, Image-TV. Sie haben alle Attribute, okay und eines der Attribute ist die Klasse, okay? Also 1 Sekunde hier drüben. Okay. Nun, was passiert, ist, wenn Sie irgendeine Art von CSS anwenden möchten, würden Sie die Klasse erwähnen und dann würden Sie das CSS im Grunde in die CSS-Datei einfügen, und dieses CSS wäre für diese spezielle Klasse. So wird es funktionieren, oder? Sie müssen also CSS schreiben und sicherstellen, dass die Klassennamen übereinstimmen. Aber wenn Sie Rückenwind haben, Sie, wenn Sie dieses spezielle Framework konfigurieren müssen Sie, wenn Sie dieses spezielle Framework konfigurieren, nur die Klassen verwenden und Sie müssen eigentlich kein CSS schreiben Also lass mich dir zeigen, was ich meine. Also, wenn du hier zu den Dokumenten gehst, okay, sagen wir, wenn du in den Dunkelmodus gehst, kannst du hier drüben sehen. Okay, wie kann man den Dunkelmodus bei der Verwendung von Rückenwind implementieren? Sie können also hier sehen, dass Sie einfach BGite verwenden können. BGIWhite bedeutet Hintergrund weiß. Okay, dunkler BG Slate 800. Also im Grunde genommen, je nach Klasse, wird alles angewendet. Also gebe ich dir ein paar Beispiele wie Display hier, Größe der Boxen, okay. Behälter. Wenn Sie also Container erstellen, können Sie SM angeben, was für Excel klein, mittel, groß und extra groß ist . Sie können davon Gebrauch machen. Okay? Du kannst PX sagen, vier hier drüben. Okay, das sind also alles Klassen, im Grunde hat die Verwendung in jeder Klasse eine Bedeutung. Und auf dieser Grundlage wird das CSS automatisch generiert. Ein einfaches Beispiel ist Padding. Okay? Wenn du Polsterung hinzufügen willst, sagst du P Null, also wird das hinzugefügt Polsterung von Null Pixeln. Wenn Sie PX Null sagen, wird der Abstand links hinzugefügt und der Abstand rechts wird um Null Pixel hinzugefügt P Null bedeutet Auffüllung oben und unten. PS bedeutet Polsterung am Zeilenanfang. Diese sind also so, dass Sie nur diese Klasse verwenden müssen und diese Eigenschaften werden automatisch hinzugefügt. So funktioniert es. Es gibt mehrere Beispiele und wenn ich sie durchgehe, dann mag es so aussehen: Oh, ich muss mich an all das erinnern, aber so schwer ist es nicht. Wenn du anfängst, es zu benutzen, wirst du es bald gut in den Griff bekommen, und du fängst an, dir die Klassennamen zu merken und So funktionieren die Dinge. Okay? Also, du kannst hier sehen, das sind die Beispiele für die Auffüllung der oberen sechs wird also Polsterung hinzugefügt. Polsterung rechts vier, also Polsterung wird hinzugefügt Also funktioniert es so. Und es gibt so, du kannst diese Dokumentation hier durchgehen, okay? Und es gibt viele Beispiele wie Sie den Hintergrundanhang, den Hintergrundclip und die Hintergrundfarbe sehen können . Es gibt viele Beispiele und Dinge, die hier erwähnt wurden. Sie können also einfach einen Blick darauf werfen. Okay? Also das ist unglaublich. Okay, weil du keinerlei CSS schreiben musst. Du verwendest einfach etwas, das vorgefertigt und für dich gemacht ist , okay? Das ist also Rückenwind. Ich möchte Sie alle ermutigen, diese Website zu besuchen und sie sich anzusehen Okay? Denken Sie jetzt daran, dass sich diese Website ständig ändert. Sie könnten die Benutzeroberfläche ändern oder so. Je nachdem, wann du dir dieses Video ansiehst, siehst du vielleicht eine andere Oberfläche, aber mach dir keine Sorgen, okay? Es ist immer noch nicht so, es wird sich nicht drastisch ändern, okay? Das Konzept und der Kern werden immer noch dasselbe sein. Okay. Also erkunde das einfach. gibt es einige Beispiele Auch hier auf der Startseite gibt es einige Beispiele. Sie können einige Beispiele für Farben sehen, okay. Okay, Beispiel für Typografie. Okay, du kannst Schatten sehen. Okay. Also ja, das ist es. Man sieht verspielt, elegant. Okay. Du kannst sehen, wie verspielt du sein kannst. Sie können sehen, dass das gesamte CSS aus den Klassennamen besteht, Sie können die Klassennamen sehen, wofür alle Klassennamen verwendet werden. Sie müssen nur den Klassennamen erwähnen. Sie können einen eleganten Look sehen, einen brutalistischen Look. Okay, verspieltes Symbol. Also sind alle möglichen Designs möglich, das zeigen diese Beispiele hier. Responsive ist auch möglich. Okay. Sie können SM, MD, LG sehen. Das gilt also für kleine Geräte, mittelgroße Geräte und große Geräte. Okay. Also kannst du die Klassen auf diese Weise spezifizieren. Okay, du kannst es hier sehen. So wird das geschaffen. Das kannst du sehen. Okay. Also ja, das ist es. Sie können die Beispiele durchgehen. Es gibt einige Beispiele. Okay. Ich liebe es, diese Beispiele zu durchstöbern und zu sehen. Sie sind so elegant. Okay. Also geh die einfach durch. Du wirst verstehen, wie wichtig es ist, warum das unglaublich ist, okay? Und wie sich die Dinge ändern können , wenn du anfängst, Tail Gent zu nutzen, okay? 3. Von Grund auf: Das erste HTML-Projekt mit Tailwind CSS: Jetzt ist es an der Zeit, dass wir ein bisschen mit Tailvent-CSS herumspielen Also, was ich tun werde, ist, dass ich hier Visual Studio-Code verwende. Ich habe meinen Browser auch Seite an Seite geöffnet. Okay. Was ich tun werde, ist eine neue Datei zu erstellen, okay? Wählen Sie eine Sprache, natürlich HTML. Wir werden eine einfache HTML-Datei erstellen. Okay, ich habe einen Plug drin, der mir helfen kann, Boilerplate-Code zu generieren Okay. Und ich werde vieles einfach halten. Ich sage Hallo. Der Titel dieser speziellen Webseite ist Hallo. Ich werde nur ein bisschen herauszoomen, damit Sie sehen können, welcher Code generiert wird. Okay? Du kannst diesen Code sehen. Es ist ein Boilerplate-Starter für HTML. Okay? Okay, wir nutzen den Rückenwind hier drüben. Also werde ich herkommen. Okay. Und ich scrolle nach oben. Gehen wir zur Dokumentation. Okay, und lassen Sie uns sehen, wie Sie es nutzen können. Okay? Also das ist der ganze Teil der Installation, okay? Das ist die Installation für Tailwind CLI. Wir werden CDN verwenden. Okay. Also hier können Sie sehen, wie Rückenwind genutzt werden kann. Okay? Also können wir ein Plugin von Drittanbietern verwenden. Okay? Es gibt ein paar Beispiele , in denen Rückenwind genutzt werden kann Okay? Also was ich tun werde, ist, diesen Code zu kopieren. Okay? Ich sage Drehbuch. Ich hole mir das Skriptelement. Komm her. Ich füge das Drehbuch im Kopf hinzu. Okay? Das ist erledigt. Ups, ich drücke versehentlich auf Speichern Die Datei wurde nicht gespeichert. Das ist okay, aber ich werde das auch kopieren. Ich werde herkommen. Okay. Und hier in den Körper werde ich das einfügen, okay? Also ja, wir nutzen, du weißt schon, einige Kurse hier drüben. Okay? Du kannst dir einige Kurse ansehen. Nun, eine Sache möchte ich erwähnen: Ihre Klassen wurden hinzugefügt. Okay, lassen Sie mich zuerst die Datei speichern. Ich speichere diese Datei auf dem Desktop, okay? Ich speichere die Datei in meinem Arbeitsbereich, in dem ich dieses Projekt erstelle , um die Dinge einfach zu halten. Also habe ich auf meinem lokalen System zu dem Ordner navigiert , in dem diese Datei erstellt wurde, und ich habe einfach doppelgeklickt, um sie im Browser zu öffnen Und Sie können es sehen, ohne irgendeine Art von CSS zu schreiben, einfach indem Sie, Sie wissen schon, Text drei Excel verwenden. Ich kann Text vier Excel sagen, speichern und die Größe wird ein bisschen größer sein. Sie können sehen, okay, Text sieben Excel. Es sollte eine gültige Klasse sein, o, und Sie können sehen, wie sich das ändert. Schrift fett gedruckt. Sie können hier auch Semi Bold verwenden, Semi Bold. Okay, so etwas. Okay, ich werde im Grunde alles, was du hier drüben hinzufügst , okay , das wird ausgewählt, das abgeholt wird. Okay. Und Sie können sehen, dass auch Unterstreichungen hinzugefügt werden Sie können jeder Art von Textformatierung auch Kursivschrift hinzufügen, was auch immer Sie möchten Okay? Du kannst hier drüben nachschauen. Und mit der Zeit geht es einfach nicht mehr um, du weißt schon, es geht einfach nicht um diese Sache. Es geht einfach nicht um Unterricht, darum, sich an Unterricht zu erinnern. Mit der Zeit wirst du Dinge lernen und du wirst auch anfangen, dir Klassennamen zu merken Okay? Sie können den Schriftstil sehen. Es gibt so viele Kursivschriften. Wenn ich Kursiv hinzufüge, wird es in Kursiv umgewandelt. Du kannst es hier sehen. Wenn ich Kursiv hinzufüge. Hoppla. Also ich möchte immer unterstreichen, ich werde Italic fresh sehen Du kannst Okay sehen. Das ist also die Magie von Rückenwind, okay? Lassen Sie uns auch ein bisschen kreieren. Ich werde das einfach loswerden. Okay? Ich werde das kommentieren und wir können eine weitere Art von Benutzeroberfläche hinzufügen. Okay. Was ich tun werde, ist, du weißt schon, diese Option auszuweiten. Okay. Wir gehen in den Vollbildmodus. Okay? Und was ich tun werde, ist, das zu speichern, Sie können im Grunde auch eine etwas bessere Benutzeroberfläche erstellen , und das möchte ich Ihnen zeigen. Im Grunde sage ich hier Klasse, BG IphenGray und hier 100 Ich sage Flex, ich sage Justify Center. Ich sage Artikelzentrum. Im Grunde bringe ich hier alles auf den mittleren, horizontalen Bildschirm. Ich werde das speichern. Okay. Nun, wenn du das speicherst und wenn du die Ausgabe siehst, uups, wenn du die Ausgabe hier siehst , lass mich dir die Ausgabe zeigen Es gibt also keine Ausgabe , weil wir dem Körper nichts hinzugefügt haben Körper nichts hinzugefügt Okay. Lassen Sie mich das machen und wir werden sehen, wie die Ausgabe aussieht. Also werde ich hier eine Div-Klasse hinzufügen, Div tut mir leid, nicht Divlas Div-Element Okay. Und lassen Sie mich einige Kurse wie Tailbin-Kurse anwenden Also werde ich PG of White hier drüben sehen. Okay, Polsterung von acht, abgerundet. Okay, LG Das ist für den Flaschenradius, Shadow of Okay. Das abgerundete LG ist zu sehen. Wenn Sie einen der Kurse kennenlernen möchten, können Sie an diesen Kursen teilnehmen. Du kannst herkommen, du kannst nach ihnen suchen. Okay. Sie können den Grenzradius sehen. Du kannst sehen. Okay. Also abgerundet LG, abgerundet mittel, okay, abgerundet. Und das ist voll abgerundet. Je nachdem, welche Klasse Sie verwenden, erhalten Sie also die entsprechende Ausgabe. Nun, was ich tun kann, ist, wenn Sie das speichern, lassen Sie mich das hier speichern. Ich speichere das. Okay, und ich aktualisiere das. Du kannst sehen, wie das hier reinkommt, dieser weiße Fleck. Lassen Sie mich das erweitern und Ende bringen, was ich versuche zu tun. Ich füge H hier drüben hinzu. Ich sage Hallo. Okay. Und ich sage Rückenwind, CSS, so etwas Ich füge nur eine Hallo-Nachricht hinzu und du solltest die Ausgabe sehen. Okay. Wenn ich also einen Refresh mache, siehst du Hello, Rückenwind, CSS Ich kann das H-Ton sogar verschönern, sodass ich hier Klasse sagen kann. Okay. Lass mich Text sagen. Ich werde das Telefon vergrößern, also sage ich zu Excel, Schrift fett, und ich sage Text. Ich möchte Grau, Okay, und Grau mit 800. Okay. Ja, lass uns sehen , wie es aussieht. Also tatenlos sollte es viel besser aussehen. Das kannst du sehen Stimmt? Also Hallo Rückenwind CSS ist das, was Sie als A-Ausgabe sehen Sie können sogar ein P-Tag hinzufügen. Sie können einfach weiter darauf aufbauen. Das ist absolut genial. P-Tag hier drüben. Du kannst sagen, hier kannst du jede Art von Nachricht hinzufügen. Das ist Subtext Dies ist ein einfaches Beispiel für die Verwendung von Tailwind-CSS hier. Und ich werde einige Klassen hinzufügen. Okay. Also ich sage Klasse von zwei Text zu Excel, Schrift fett hier drüben. Oder nicht, ich sollte hier nicht Excel verwenden müssen , weil das ein Untertext ist, also werde ich nur Text haben, Cree und statt 800 werde ich ihn einfach ein bisschen füttern Ich sage 600, ein leichteres Blatt. Lass mich auffrischen. Du kannst es sehen. Hello Tailwind CSS ist ein einfaches Beispiel für die Verwendung von Tailwind-CSS Wie sieht das aus? Wissen Sie? Du hast hier buchstäblich kein CSS geschrieben . Kein CSS. Sie haben gerade dieses Skript-Tag hinzugefügt und verwenden einfach Klassen, und allein dadurch, dass Sie Klassen verwenden, sehen Sie diese erstaunliche Ausgabe. Okay? Es ist so wunderschön. Okay, du musst dich nicht darauf konzentrieren, CSS zu schreiben, du musst dich nur darauf konzentrieren, die richtigen Klassen zu verwenden, und genau das ist Rückenwind für dich Und mit der Zeit, sage ich dir, sieht es vielleicht ein bisschen schwierig aus, aber mit der Zeit wird es super einfach und du fängst an, dich an den Unterricht zu erinnern Das sind zum Beispiel die Klassen für abgerundete Ecken. Du erinnerst dich daran, wenn du sie zwei-, dreimal benutzt , weißt du? Sie können abgerundete volle, abgerundete keine sehen. Okay? Sie können sehen, es gibt verschiedene Beispiele, die mit R, LG abgerundet sind. Sie können sehen, wie es angewendet wird. Es gibt so viele Beispiele und die Dokumentation ist auch wirklich gut. Okay? Ich hoffe, Ihnen gefällt das und ich hoffe, Ihnen gefällt dieses Beispiel und die Möglichkeiten , die Sie mit diesem fantastischen Framework bieten können. 4. React trifft auf Rückenwind: Das erste Projekt wie ein Profi: Jetzt ist es an der Zeit, dass wir darüber sprechen, wie Sie Ihr React-Projekt mit Rückenwind einrichten können Sie Ihr React-Projekt mit Rückenwind einrichten Also, was ich tun werde, ist hier, ich bin im Visual Studio-Code und ich bin im Stammverzeichnis des Ordners, in dem ich alle Projekte erstelle Okay? Jetzt können wir in diesem Stammverzeichnis ein weiteres Projekt erstellen, für das ich bereits React Tailwind habe Das ist also ein Befehl , mit dem Sie ein neues React-Projekt mit at erstellen Man kann also sagen, dass NPM Weizen spätestens erzeugt. Und das wird Ihnen einige Fragen stellen, ob Sie möchten , welches Framework Sie verwenden möchten oder welches Template Sie verwenden möchten All diese Fragen wie du musst React, Vanilla Gs und all das auswählen . Und je nach Ihren Vorlieben wird es ein Projekt für Sie erstellen. Ich habe diesen Schritt bereits gemacht, also werde ich ihn nicht noch einmal machen, aber ich werde dieses Projekt namens React Tailwind erstellt haben dieses Projekt namens React Tailwind Ich gehe zu diesem Projekt, o und dann werde ich den Server laufen lassen Also sage ich hier NPM Run Tab. Okay. Sobald ich das starte, siehst du diese Standardseite hier oben. Okay? Nun, dieses Projekt ist erstellt, aber hier wurde keine Rückenwind-Konfiguration vorgenommen. Nun, um die Tailwind-Konfiguration durchzuführen, müssen Sie tatsächlich ein paar Konfigurationsdateien hinzufügen oder hinzufügen, oder ich sollte sagen, nur eine Konfigurationsdatei, okay? durchzuführen, müssen Sie tatsächlich ein paar Konfigurationsdateien hinzufügen oder hinzufügen , oder ich sollte sagen, nur eine Konfigurationsdatei, okay Und ich werde Ihnen zeigen, wie wichtig diese Datei ist und wie Sie sie erstellen können Also, hier auf tailwind css.com, wenn du anfängst, wirst du zu diesen Aktien weitergeleitet, und du wirst hier sehen, wie du Tailwind installieren kannst, wie du Tailwind installieren kannst Sie können Tailwind also auf diese Weise installieren. Okay, du kannst sagen, dass NPM Hyphen D Tailwind CSS installiert. Dadurch wird sichergestellt , dass die Abhängigkeit zu Ihrem Projekt hinzugefügt wird Dann müssen Sie auch Tailwind in Ihrem Projekt initialisieren, was bedeutet, dass Sie diesen Befehl NPH tailwind Css darin ausführen müssen , und dadurch wird diese Tailwind Config Dot Gs-Datei generiert, die wie eine Konfigurationsdatei für Tailwind ist Das ist also etwas, das wir tun müssen . Okay? Was ich tun werde, ist die Befehle nacheinander zu kopieren. Ich komme her und erstelle ein neues Terminal. Okay. Eine weitere Sache, die ich erwähnen möchte, ist der Inhalt der Tailwind-Confit-Datei. Okay? Du kannst sehen, dass es so aussieht, okay? Du kannst dein Theme erweitern, das Standard-Tailwind-Theme Wenn Sie benutzerdefinierte Farben oder Definitionen hinzufügen möchten benutzerdefinierte Farben oder , die für Ihre Anwendung gültig sind, können Sie sie hier definieren. Die Plugins kannst du erwähnen, okay? Und dann müssen Sie diesen Code in die Haupt-CSS-Datei oder die Root-CSS-Datei Ihres Projekts einfügen in die Haupt-CSS-Datei , damit Ihr Projekt Rückenwind Okay? Dies sind also einige der Schritte, die angegeben wurden, und so können Sie überprüfen, ob Tailwind richtig konfiguriert ist Okay? Nun, zusammen mit Rückenwind, okay, bevor ich Tailwind installiere, möchte ich dir sagen, dass es ein paar Dinge gibt, die wir auch installieren möchte ich dir sagen, dass es ein paar Dinge gibt müssen Also das ist nur für die Installation von Tailwind, okay? Also, du wirst hier Tabs sehen. Post-CSS verwenden. Okay? Also werden wir diesen Ansatz verfolgen. Okay? Also installieren wir Tailwind und konfigurieren auch Post-CSS. Nun, Rückenwind, wir wissen natürlich, dass es wie ein Utility-Force-Framework für CSS ist, okay Nun, was ist Post-CSS, okay? Post-CSS ist also ein Tool zum Transformieren von CSS mit dem Ja Script-Plugin. Okay, es erledigt im Grunde die Aufgabe, Ihr CSS zu verarbeiten und Transformationen wie Änderungen anzuwenden, Unterstützung für zukünftige CSS-Funktionen, CSS-Versionen usw. hinzuzufügen CSS-Versionen usw. Okay? Das wird es tun, und dann werden wir auch automatischen Präfixor verwenden, den Sie hier sehen können. Dieser Befehl lautet also: Installiere Bindestrich D, Tailwind-CSS, Post-CSS und Auto-Präfixor Autoprefixor ist also ein Plugin, das Ihrem CSS automatisch jede Art von browserspezifischen Präfixen hinzufügt Bei einigen Browsern muss beispielsweise ein Bindestrich-Webkit Und das Hinzufügen von Webkit mit Bindestrich in diesem bestimmten Browser gewährleistet die Kompatibilität Mozilla Firefox-Browser, Mozilla Firefox. Sie wollen, dass Hyphen Moose hinzugefügt wird. Wo immer es nötig ist, oder? Und das dient im Grunde dazu, eine bessere Kompatibilität mit dem Browser zu haben . Die Apps können besser kompatibel sein. All das wird also automatisch hinzugefügt, Sie müssen es nicht manuell hinzufügen. Okay? Und das macht Ihr CSS viel kompatibler und produktionsfähiger. Okay? Also empfehle ich, diese beiden Dinge hinzuzufügen, okay. Und ich würde sagen, so würden wir Tailwind mit React konfigurieren Okay? Also werde ich diesem Ansatz folgen. Ich kopiere einfach diese Befehle. Ich werde herkommen, okay? Und ich sage CD. Reagieren Sie auf Rückenwind, ich navigiere zum Projektverzeichnis. Ich übergebe diesen Befehl und drücke Ender Okay? Okay, das wird funktionieren. Okay, Sie können sehen, dass Pakete hinzugefügt wurden. Und wenn du zu den Paketen gehst, wirst du hier drüben nachschauen. Sie können React sehen. Ich lasse das einfach zusammenklappen und minimiere es, damit es eine bessere Sicht gibt. Nun, ich schließe die Befehlszeile nicht , weil wir sie brauchen werden, aber Sie können hier Rückenwind nach CSS sehen und Sie werden auch AutoPrefixor haben Okay, das ist erledigt. In Ordnung? Jetzt wurden die Pakete hinzugefügt, was bedeutet, dass Abhängigkeiten existieren. Okay? Also müssen wir jetzt die nächsten Schritte machen wie Rückenwind initialisieren, okay Und wir müssen auch Post-CSS initialisieren. Das ist also etwas, das ich auch tun werde. Okay. Und das wird eine Init-Datei wie diese erzeugen, okay? Und dann sind das die Inhalte hier drüben. Das ist also Post-CSS-Config JS, Sie sehen können, und das ist Tailwind Config Okay? Und dann fügen wir das zu unserem Root-CSS hinzu. Das werden wir tun. Und dann werden wir Dinge testen, okay? Was ich tun werde, ist, ich werde herkommen. Sie können also manuell Punkt-Gs nach einem CSS-Konflikt erstellen. Sie können es hier sehen. Sie können das manuell erstellen oder ich lasse es automatisch generieren. Es gibt also einen Befehl , den wir kennen müssen. Also sage ich N PX, Rückenwind CSS. Darin, Hoppla, Bindestrich P. Okay? Wenn Sie gerade die Projektstruktur öffnen, ist keine Datei mit einem Tailwind-Konflikt definiert. Lassen Sie mich das ausführen und sehen, was hinzugefügt Sie können also sehen, dass die Tailwind-Konfiguration hinzugefügt wurde und die Post-CSS-Konfiguration hinzugefügt wurde Okay? Sie können hier auch die Ausgabe sehen. Die Tailwind-Konfigurationsdatei wurde erstellt und die Post-CSS-Konfigurationsdatei Das ist also ein Befehl NP x, Tailwind-CSS drin, Bindestrich Tailwind-CSS drin, Bindestrich P. Okay? Also, wenn du diese Dateien öffnest, kannst du sehen, dass das Post-CSS ist, okay? Und das ist die Datei für die Tailwind-Konfiguration. Du kannst beide Dateien sehen, okay? Und Post-CSS ist im Grunde hier drüben. Das nutzt also auch Rückenwind und Auto-Präfixor Und das ist eine Tailwind-Konfigurationsdatei . Falls Sie sich immer noch nicht sicher sind, warum wir überhaupt Post-CSS hinzugefügt haben, okay, ich möchte noch einmal wiederholen, dass Post-CSS ein Tool ist, okay, mit dem Sie die vorhandenen Plugins nutzen können Okay? Also wie der Name schon sagt Post CSS. Also im Grunde erledigt es die Aufgabe der Nachbearbeitung des CSS, okay? Zum Beispiel die Verbesserung der browserspezifischen Kompatibilität und all das. Wenn Sie also Plugins zu Ihrer Anwendung hinzufügen möchten, müssen Sie grundsätzlich Post-CSS verwenden. Sie können hier in der Post-CSS-Konfiguration sehen, dass wir Tailwind-CSS hinzugefügt haben, dass wir Tailwind-CSS konfiguriert haben, und wir sagen auch, dass dafür Autoprefixor verwendet wird Okay. Das automatische Präfix fügt Ihrem CSS browserspezifische CSS-Tags hinzu browserspezifische CSS-Tags Okay? Genau das wird es tun. Okay? Also ja, das haben wir getan, und alle Abhängigkeiten wurden hier hinzugefügt. Okay. Post-CSS ist also nur ein Tool, mit dem Sie vorhandene Plug-ins nutzen können. Das ist was es ist. Sie können also keinen Autoprefixor hinzufügen, ohne Post-CSS zu verwenden, okay? Das ist also etwas, was wir hier machen. Okay? Und ich hoffe, das macht jetzt Sinn, warum wir tun, was wir tun. Das ist also nur eine einmalige Konfiguration , die Sie vornehmen müssen, und später werden wir das nicht mehr anfassen, okay? Also, aber du musst wissen, warum wir das tun. Okay? Also das ist wichtig. Also, das sind Dinge, die du hier hinzufügen musst. Okay? Also musst du sicherstellen, dass alle Teile in allen Vorlagendateien im Grunde so sind, wie es hier drüben steht. Fügen Sie die Teile zu allen Vorlagendateien hinzu, wie allen HTML-Dateien, JavaScript-Dateien, JSX-Dateien Also, wenn du herkommst. Okay. Okay, es wurde also nicht hinzugefügt. Okay, das müssen wir also hinzufügen. Also, was ich tun werde, ist das hier rüber zu kopieren. Okay. Und ich werde es hier drüben einfügen, okay? Und ein T. Okay. Was ich jetzt tun werde, ist diesem vierten Schritt zu folgen. Ich werde das kopieren, okay. Und lass uns hierher und hier im Haupt-CSS kommen. Also wo ist das Haupt-CSS. Okay? Also gehen wir in den SRC-Ordner Hier haben wir App-Punkt-CSS, das etwas CSS enthält, und dann haben wir Index-Punkt-CSS, das auch etwas CSS enthält Also werde ich beide loswerden , weil wir nicht beide brauchen. Also App Dot CSS auch. Okay. Also sind wir alles losgeworden. Jetzt in Indexpunkt-CSS in der Root-CSS-Datei, und so wird das Indexpunkt-CSS hier in Hauptpunkt-GSX verwendet Indexpunkt-CSS hier in Hauptpunkt-GSX Also was ich tun werde, ist in Index Dot CSS, ich werde das hinzufügen, okay? Das ist jetzt hinzugefügt, okay? Und dann müssen wir im Grunde genommen Rückenwind testen, okay? Also kopiere ich das Und ich werde es zu meinem Projekt hinzufügen. Okay? Aber bevor du etwas zum Projekt hinzufügst, sieh dir nur eine Sache an. Hier entfernen wir das CSS, aber selbst nach der Konfiguration von Rückenwind, okay, es bringt nicht den Rückenwindeffekt, Und das kann ich spüren. Okay? Und ich weiß, was das Problem ist. Was ich tun werde, ist, einfach den Server zu stoppen. Okay, stoppe den Server und ich starte ihn neu, damit die neuen Konfigurationsdateien abgerufen werden. Okay. Mal sehen, ob Okay, also jetzt können Sie sehen, dass Rückenwind aktiviert wurde oder die Benutzeroberfläche geändert Das Problem war auf den Neustart zurückzuführen. Also haben wir neue Konfigurationsdateien erstellt , die beim Neustart abgerufen werden. Okay. Eine weitere Sache, die ich hier machen werde, ist, dass ich HTML GS habe. Okay. Ich füge hier auch GSX hinzu. Okay? Also füge ich auch GSX hinzu, okay Und TSX, was für Typoskript ist. Okay. Und ich werde sehen, ob das ist. Okay, das wird erledigt. Okay? Was ich tun werde ist, das ist erledigt. Jetzt werde ich dieses Stück kopieren. Okay. Lass uns herkommen. Und hier drüben gehe ich einfach rein, lass uns vielleicht Punkt Aix oder App Punkt GSX meinen App.j6 hat diesen Code, der für Sie gerendert wird. Okay. Ich minimiere das einfach. Ich würde das ganze TIF hier bis hierher verlassen und das einfach zusammenfügen. Und ich drücke zweimal die Tabulatortaste, speichere das und du kannst es sehen. Es steht Text von drei Excel und Fettschrift. Und unterstreiche das, okay? Und du kannst sehen, wie eine anständig aussehende Benutzeroberfläche hier reinkommt, okay? Und das ist Stil, der Rückenwind nutzt. Okay? Also, es gibt nicht viel, was wir hier gemacht haben. Okay, wir haben gerade den Code kopiert, aber wir haben auch sehr einfaches CSS geschrieben. Es ist nicht so schwer. Okay? Wir können sogar selbst etwas CSS schreiben. Was ich hier also tun kann, ist, dass ich das loswerden kann. Okay. Und ich kann mein eigenes CSS schreiben. Ich kann TiVo sagen, hier drüben, und ich sage Klasse. Ich werde eine Klasse erstellen. Okay, und ich sage Klassenname ist BG Hyphen White Jetzt können Sie sich hier alle Vorschläge für Kurse mit Rückenwind ansehen . Visual Studio-Code schlägt mir also alle Rückenwind-Klassen Dies sind alle Rückenwind-Klassen. Anstatt zu tippen, muss ich einfach BG Gray sagen, und es gibt mir einen Vorschlag und ich kann ihn einfach auswählen Okay. Und es zeigt mir auch die Farbe, die ich auswähle. Also das ist für den grauen Hintergrund hier drüben. Wenn du dir nicht sicher bist, was eine bestimmte Klasse ist, kannst du sie einfach kopieren und hierher kommen und du kannst sogar hier suchen. Wenn du suchst, wirst du sehen, dass es um die Hintergrundfarbe geht. Sie können hier drüben sehen, Hintergrund schwarz, Schiefer. Also statt Schiefer und Schwarz verwenden wir Grau. Das kannst du hier sehen. Wenn du BG Indigo, 500 sagst, wird es dir solche Farben geben , was ist das CSS, das es im Nachhinein generiert Lass mich dir das auch zeigen. Hier steht also BG Grey 100. Wenn ich mit der Maus darüber fahre, wirst du im Hover-Popup sehen, dass dies das CSS ist, das generiert wird . Hintergrundfarbe. Dies ist der RGB-Wert und die Opazität von eins. Sie können sehen, dass dies CSS ist, in das diese Klasse übersetzt wird. Nun, wie erhalte ich diese Funktion von Auto Suggest, zuallererst für Klassen, die Vorschau hier drüben und auch, welches CSS übernommen wird Ich sage Ihnen also, es gibt ein interessantes Plug-In, das Sie auf Visual Studio-Code installieren können auf Visual Studio-Code installieren wann immer Sie mit Tail Gent arbeiten. Ich kann dieses Plug-In nur empfehlen. Also hier habe ich einige Plugins installiert, okay. Also lass mich das einfach erweitern. Okay? Der Plugin-Teil. Sie sehen also, es gibt einige Plug-ins für Angular. automatische Umbenennen des Tags ist eine, ich verwende die Einfärbung von Klammerpaaren ES sieben. Dies dient zum Generieren von Snippets Wenn Sie also irgendwelche Snippets wie Komponentencode, Boilerplate-Code generieren möchten, alles, was Sie mit diesem Plugin tun Wenn Sie nach unten scrollen, gibt es Intellisence Okay? Wo ist es? Ich verstehe es nicht. Preteer ist auch hier hilfreich Okay. Ich kann es hier nicht finden. Live Server ist auch ziemlich gut. Okay. Oh, hier, Rückenwind, CSS-Intelligenz. Das ist also etwas, das Sie installieren müssen, also müssen Sie hier nach Tailwind-CSS suchen Oder auf dem Plugin-Marktplatz, und Sie werden auf dieses Plug-in-Tailwind-CSS stoßen Okay. Ich ermutige Sie alle sehr, dies zu installieren, denn das können Sie hier im Screenshot selbst sehen , im Screenshot hier. Es zeigt dir den automatischen Vorschlag. Es ist also hilfreich. Es ist wirklich hilfreich. Es gibt dir automatische Vorschläge, und im Grunde gibt es so viele Klassennamen. Es wird dir auch bei der Vorschau helfen. Es ist also sehr hilfreich, das Gerät anzuschließen, wenn Sie mit Rückenwind arbeiten Weil es so viele Klassen gibt. Natürlich werden Sie die Klassennamen irgendwann im Laufe der Zeit lernen, aber das beschleunigt die Geschwindigkeit. Wenn ich jetzt mehr Polsterung hinzufügen möchte, kann ich P, Bindestrich acht sagen Und Sie können sehen, dass es dieses CSS für mich generiert, von zwei RM Also ich weiß, okay, das wird angewendet. Wenn ich nicht will , dass zwei REMs aufgefüllt werden, kann ich hier vier machen. Ich kann fünf machen. Okay. Also ich kann sechs machen. Sie können sehen, dass aus einer Polsterung von 1,5 eine Polsterung von acht wurde. Okay. Darauf basierend können Sie Dinge tun, okay, abgerundeter Bindestrich LG, und Sie können Shadow Shadow of G hier drüben sagen, Sie können sehen, dass das das CSS ist, das generiert wird Okay? Also das alles kannst du absolut tun. Okay? Also füge ich PG hinzu. Anstatt BG-Grau bleibe ich hier bei BG-Weiß. Wir werden sehen, wie es aussieht, BG-Weiß. Acht, abgerundetes LG, Schatten-LG hinzufügen. Okay, ich füge oben, im Grunde oben, noch ein weiteres Div hinzu. Also hier, ich schneide dieses Div aus und komme hierher. Okay. Und ich werde das einfach einrücken . Okay? Also das ist erledigt. Und ich sage hier statt BG White, ich sage Grau. Okay, grün von 100. Ich sage Flex. Okay, begründen Sie das Zentrum. Okay, und das Artikelzentrum auch, so etwas in der Art. Und horizontaler Bildschirm. Okay. Also das ist erledigt, okay? Ich habe ein paar Tipps. Was ich jetzt tun werde ist, lass mich H eins hier drüben hinzufügen. Ich füge H eins hinzu. Okay. Und in H One sage ich Hallo. Und Rückenwind-CSS in React, so etwas in der Art. Okay. Und du kannst im Grunde die Klassen hier hinzufügen, also kannst du Ups sagen, damit ich Klassenname sagen kann Und Sie können Text mit Bindestrich in Excel und Schrift in Fettschrift angeben Okay. Und du kannst Text graugrau sagen oder lass es uns 800 behalten. Okay. Und ja, das ist erledigt. Also sollten wir hier ein anständig aussehendes Interface haben , wenn du siehst. Sie können also sehen, Hallo Rückenwind CSS in React. Fair genug Sie können auch Untertext hinzufügen, also fügen wir hier einen Untertext hinzu. Ich sage hier Ptag, so etwas in der Art. Und ich sage, das ist ein einfaches Beispiel für die Verwendung von Tail Wind, CSS im React-Projekt Etwas wie das. Wenn ich das speichere, siehst du die Ausgabe hier oben, aber sie ist nicht gestylt, also füge ich hier ein paar Klassennamen hinzu, damit sie ziemlich anständig aussieht Ich sage Text grau. Okay? Text grau von lassen Sie mich es um 600 leichter machen und Sie können sehen, dass es jetzt heller ist. Okay. Also du kannst sehen, dass es das ist, was es ist. Wenn du es im Vollbildmodus machst, siehst du das in der Mitte. Und ich bin ein bisschen um 200 herangezoomt. Das ist also die tatsächliche Ansicht hundert Prozent, wie in der normalen Ansicht Okay. Wenn ich heranzoome, sehe ich das viel schneller. Okay? So können Sie also, Sie wissen schon, Tailwind-CSS für Ihr Projekt konfigurieren Sie wissen schon, Tailwind-CSS für Ihr Projekt Und das macht das Leben viel effizienter und einfacher, wie Sie sich vorstellen können, oder? Ich hoffe, Ihnen hat das gefallen und fanden es nützlich. Ich werde alles sehen. 5. Jenseits der Grundlagen: Responsive Design und benutzerdefinierte Themes in React mit Tailwind: Wenn Sie heute irgendeine Art von Webanwendung erstellen , ist responsives Design wirklich, wirklich wichtig Da viele Benutzer auf kleinere Bildschirmgrößen wie Tablets und Mobiltelefone umsteigen , ist es wahrscheinlich, dass Ihre Anwendung auch auf kleineren Bildschirmgrößen verwendet wird . Und es ist wirklich wichtig , dass Sie wissen, wie Sie Ihre Anwendung für verschiedene Bildschirmgrößen erstellen können. Zum Glück ist das mit Rückenwind wirklich, wirklich einfach, wenn Sie wissen, was Sie tun müssen Deshalb gebe ich dir einen Überblick darüber, wie Tailwind es dir ermöglicht, mobilfreundliche Komponenten zu entwickeln , die nicht nur mobilfreundlich sind, sondern auch für verschiedene Bildschirmgrößen wie Tablets geeignet verschiedene Bildschirmgrößen wie Wir gehen also zu Erste Schritte, und hier unter Erste Schritte auf der linken Seite sehen Sie dieses responsive Design Und Sie können hier sogar nach responsivem Design suchen , okay? Also werde ich hier einfach zum responsiven Design übergehen, okay? Und hier erfahren wir, wie Rückenwind es Ihnen ermöglicht zu schreiben oder Komponenten zu bauen , die mit unterschiedlichen Bildschirmgrößen kompatibel sind , okay? Wenn wir nun von responsiven Designs bei Rückenwind sprechen, muss man sagen, dass jede Klasse, die es in Rückenwind gibt dass jede Klasse, die es in Rückenwind gibt, bedingt auf unterschiedliche Breakpoints angewendet werden kann bedingt auf unterschiedliche Breakpoints angewendet Okay? Also, was ist ein Breakpoint Okay? Breakpoints sind nun bestimmte Bildschirmbreiten, an denen sich das Layout oder der Stil der Webseite ändert, um sicherzustellen, dass der Inhalt auf verschiedenen Bildschirmgrößen oder auf verschiedenen Geräten gut aussieht auf verschiedenen Bildschirmgrößen oder auf verschiedenen Geräten gut Okay? Sie sind also wie eine Regel, die entscheidet, wie Ihr Design an unterschiedliche Bildschirmgrößen anpasst . Lassen Sie mich Ihnen ein Beispiel geben. Also hier kannst du sehen, das sind alle Breakpoints, okay? Dies sind alle Standard-Breakpoints. Und das sind fünf, die standardmäßig als Rückenwind existieren. Wenn Sie also SM sagen, sagen Sie im Grunde, dass die Mindestbreite des Bildschirms 640 Pixel betragen sollte Okay? Wenn Sie MD sagen, sagen Sie, dass die Mindestbreite 768 Pixel betragen sollte. Für LG beträgt die Mindestbreite 1024. Für Excel ist es 1280. Für zwei Excel sind es 1536 Pixel. Und das ist das entsprechende CSS, okay? Das ist also standardmäßig definiert. Wenn Sie nun eine Klasse hinzufügen möchten oder wenn Sie bestimmten Bildschirmgrößen eine bestimmte Art von Designelement oder eine Art von CSS hinzufügen Designelement oder eine Art von möchten, müssen Sie diese Breakpoints als Präfix verwenden . Sie können es also hier sehen. Hier ist ein Beispiel für ein Bild-Bild-Tag, und Sie sagen eine Bildbreite von 16. Okay? Die Breite von 16 ist also standardmäßig die Breite. Wenn Sie nun MD Doppelpunktbreite 32 angeben, wie W 32, entspricht 32 der Breite auf mittleren Bildschirmen, o und 48 auf größeren Bildschirmen. Okay. Größere Bildschirme bedeuten also 1024 Pixel und mehr. Mittlere Bildschirme bedeuten 768 Pixel und mehr. Okay, so wird das also gehandhabt. Dieses MD- und LG-Präfix stellt also sicher, dass diese CSS abhängig der vorhandenen Breakpoint-Definition, von der vorhandenen Breakpoint-Definition, okay, abhängig von der Gerätegröße bedingt angewendet werden abhängig von der Gerätegröße bedingt Und ja, bevor Sie all das nutzen , müssen Sie sicherstellen, dass Sie dem Head-Dokument ein View-Pot-Metatag hinzugefügt haben Head-Dokument ein View-Pot-Metatag Okay? In der Kopfzeile Ihres Dokuments, tut mir leid. Also im Grunde genommen, wenn du in unserer Bewerbung hierher kommst , okay? Und wenn Sie zu Indexpunkt-HTML wechseln, müssen Sie diesen Viewpot hier haben , der standardmäßig vorhanden ist Okay? Aber wenn etwas nicht funktioniert, kannst du es überprüfen, okay? Aber das muss vorhanden sein. Und so funktioniert es. Also ich hoffe, das macht Sinn, okay? Und das funktioniert für jede Utility-Klasse im Framework. Es gibt also Klassen direkt bei Rückenwind definiert sind. Das sind alle Klassen Stimmt. Und Sie können dieses Präfix oder diese Breakpoints jede Art von Klassen Du kannst sehen. Das ist es, was es bedeutet. Okay? Sie können also buchstäblich alles an einem bestimmten Haltepunkt ändern, sogar Dinge wie den Buchstabenabstand oder den Cursorstil Okay? Nun, hier ist im Grunde ein Beispiel, das sie gegeben haben. Okay, Sie können die Bildschirmgröße ändern, Sie können sehen, wie sich das ändert. Das nutzt also komplett Rückenwind, Sie können sehen, wie sich das ändert Und hier hast du im Grunde auch das CSS. Du kannst sehen. Standardmäßig ist das äußere TIF also ein Display-Block, aber durch Hinzufügen von MD Flex wird es auf mittleren und größeren Bildschirmen zu Display-Flex. Wenn die Bildschirmgröße also mittelgroß oder größer wird, wird sie flexibel, wie Sie sehen können, oder? So wird es also gesteuert. Sie können sehen, dass der Verkleinerer ebenfalls hinzugefügt wird. Okay. Um ein Schrumpfen auf mittleren und größeren Bildschirmen zu verhindern, haben Sie MD Shrink of Zero verwendet Okay. Also ja, das ist die Sache hier drüben. Nun, hier können Sie sehen, okay, Tailwind verwendet das Mobile First Breakpoint System, was bedeutet, dass Sie es können, ähnlich was für andere Frameworks wie Bootstrap verwendet werden könnte Okay. Was das bedeutet, wie Dienstprogramme ohne Präfix Also, wenn Sie Großbuchstaben verwenden. Okay, das wirkt sich auf alle Bildschirmgrößen aus, auch wenn es sich um Bildschirmgrößen mit Präfix handelt Wenn Sie also dem Großbuchstaben MD voranstellen, findet dies nur an einem bestimmten Haltepunkt und darüber statt an einem bestimmten Haltepunkt Nun zu MD, was ist ein Breakpoint? Für MD liegt der Breakpoint bei 768 Pixeln und höher. Okay? Also wird es stattfinden oder es wird angewendet. Wenn du MD MD Doppelpunkt pro Fall verwendest, wird er nur oberhalb dieser Bildschirmgrößen und darüber angewendet , okay? Also hier können Sie sehen, Sie können hier sehen, div class SM Text Center. Es wird also nur auf Bildschirmen mit mehr als 640 Pixeln und mehr zentriert, nicht auf kleinen Bildschirmen. Okay? Nun, Textzentrum, das zentriert den Text auf Mobilgeräten und linksbündig auf Bildschirmen wie 640 Pixeln und breiter. Okay, so können Sie es nutzen, Sie können die ganze Sache durchgehen. Okay? Eine tolle Sache ist, dass Sie auch Ihre Breakpoints anpassen können Okay, ich habe dir gesagt, das bietet Tailwind standardmäßig Was Tailwind standardmäßig bietet. Nehmen wir an, ich definiere für meine Anwendung eine andere Größe für MD, LG und möchte meine eigene Anpassung vornehmen Sie können es also anpassen, wenn Sie hier nach unten scrollen, können Sie es anpassen, sodass Sie es unter dem Thema bei Rückenwind Conflict haben können Thema bei Rückenwind Conflict haben Sie können Bildschirme haben und Sie können hier Ihre eigenen Bildschirmdefinitionen definieren. Okay. Du kannst es so definieren, wie du willst. Das Tablet hat also 640 Pixel. Der Laptop hat 1024 Pixel, Desktop hat 1280 Pixel. Okay? Und es gibt ein zusätzliches Dokument zum Anpassen der Breakpoints Hier können Sie also sehen, wie Sie die Bildschirme anpassen können. Okay. Sie können sogar die Standardeinstellungen anpassen Sie können hinzufügen, dass dies die Standardeinstellung ist. Dies sind Standard-Breakpoints, die hinzugefügt werden. Sie können sie bei Bedarf anpassen. Okay? Sie können einen einzelnen Bildschirm überschreiben. Wenn Sie also beispielsweise LG, den Breakpoint für große Bildschirme, überschreiben möchten , können Sie das auf diese Weise tun, indem Sie einfach LG angeben Sie können neue Haltepunkte hinzufügen, z. B. drei Excel. Es geht also in zwei Excel. Wenn Sie jedoch drei Excel hinzufügen möchten, können Sie das tun. Okay? All das ist anpassbar. Es liegt ganz bei Ihnen und Sie können es dann auf diese Weise nutzen. Welchen Namen Sie auch immer Ihrem Tablet gegeben haben , Sie können es auf diese Weise verwenden. Es ist also unglaublich. Okay? Geh das einfach durch mach das willkürlich durch, tut mir leid, nicht willkürlich. Gehen Sie einfach diese Dokumentation hier durch und Sie werden ein bisschen darüber erfahren. Wir werden dies auch in die Tat umsetzen. Also werde ich zu meiner Codebasis wechseln. Okay, hier werden wir sehen , wie wir tatsächlich anpassen oder wie wir tatsächlich responsive Designs erstellen können. Das werden wir hier lernen. Okay. Also als Erstes, was ich tun werde, ist , das zu schließen. Ich werde zu App Dot Jex kommen. Ich habe hier nichts. Ich werde Dev hier drüben hinzufügen, so etwas in der Art. Okay. Also DV ist hinzugefügt Ich werde den Klassennamen sagen. Ups, Klassenname. Ich sage PG oder Cra von 100. Okay? Und ich sage P Bindestrich vier Okay. Also das ist etwas, was ich tun werde, und ich werde hier eine Liste hinzufügen. Lassen Sie uns also eine Liste hinzufügen und sehen, wie Sie diese Listenelemente responsiv gestalten können . Okay? Also sage ich Klassenname. Ups, Klassenname als Liste ohne. Okay, also ich sage Liste. Keiner hier drüben, du kannst sehen. Okay. Und ich füge die Listenelemente hinzu, also sage ich hier LI. Ich sage Punkt eins. Okay, Punkt eins. Ich kopiere das. Okay. Ich sage, kopiere Punkt eins, Punkt zwei und Punkt drei, im Grunde füge ich hinzu. Okay, das werden also zwei sein, und das werden drei sein. Wenn ich das jetzt speichere, siehst du Punkt eins, zwei, drei. Wenn ich diese Klasse lösche, werden Sie sehen, dass die Elemente eins, zwei, drei hinzugefügt werden. Sie sehen eine helle Hintergrundfarbe aufgrund des CSS, das ich oben angewendet habe. Okay. Also das sind Listenelemente. Wenn Sie die Klassennamenliste none hinzufügen, wird sie in eine Liste ohne Liste umgewandelt. Was ich jetzt tun werde, ist, hier etwas CSS hinzuzufügen. Ich sage Klassenname. Ich sage hier BG Blue. Okay. Ich kann BG Blue von 500 sagen. Ich kann Text weiß sagen. Und ich kann P zwei sagen, Padding Two, und ich sage abgerundetes LG, ungefähr so Okay, Sie können sehen, dass der erste in ein Ding im Button-Stil umgewandelt wurde Okay. Ich kopiere das CSS und bewerbe mich hier für alle drei. Also füge ich es hier hinzu und ich füge es hier hinzu. Okay. Lass mich dir jetzt ein Problem zeigen. Wenn ich also auf eine größere Bildschirmgröße wie diese gehe , verschwende ich unnötig die rechte Seite, Es verschwendet unnötig die rechte Seite des Bildschirms, weil diese Taste einfach so gestreckt wird. die rechte Seite des Bildschirms, weil diese Taste einfach so gestreckt wird. Es ist nicht gut Auf einem größeren Bildschirm möchte ich sie also horizontal gestapelt haben Okay. Und auf einem kleineren Bildschirm sieht das gut aus. Auf einem kleineren Bildschirm muss es vertikal sein. Das ist in Ordnung. Okay. Also, ich kann hier auch Marge hinzufügen. Okay? Ich kann sagen, eine Marge von zwei, sozusagen. Okay. Ich finde, eine Marge von zwei ist besser. Lassen Sie mich das hinzufügen. Okay. Ja, Marge von zwei. Jetzt ist das vertikal gestapelt Dies wird auf einer größeren oder größeren Bildschirmgröße wieder vertikal gestapelt auf einer größeren oder größeren Bildschirmgröße wieder Dieses Layout ist in Ordnung, aber für Mobilgeräte ist es in Ordnung, würde ich sagen, aber Abfall ist ein horizontaler Raum auf größeren Bildschirmen, und dadurch wird die Bildschirmfläche nicht effizient genutzt , oder? Das ist ein Problem, das Sie verstehen. Also, was ich tun werde, ist, hier etwas CSS hinzuzufügen. Okay? Also als Erstes würde ich herkommen und ein paar Kurse hinzufügen. Ich sage MD. Okay? Also für mittelgroße Geräte, okay, mittlere Geräte und größer, sage ich Doppelpunkt, Pix Px von vier Okay. Und ja, diese eine Sache werde ich hinzufügen. Und ganz oben, wenn wir den Listentyp None angeben, sage ich einfach MD, ClinoopsFlex Ich ändere es auf Flex. Im Grunde genommen die Flexbox oder eine horizontale Flexbox auf mittelgroßen Bildschirm oder einem größeren Bildschirm. Okay? Und ich sage MD von Cap of Four. Grundsätzlich werden diese beiden Klassen auf größere Bildschirmgrößen angewendet. Sie können also auf einer kleinen Bildschirmgröße sehen, dass sich nichts ändert, oder? Aber lassen Sie uns das in die Länge ziehen. Okay, Sie können jetzt sehen, dass es von klein zu groß geändert wurde. Sie können vorhin sehen, dass das nicht passiert ist. Okay? Also siehst du hier eine Lücke, die Lücke zwischen den Tasten, weil ich diese Lücke von vier hinzugefügt habe. Wenn ich das weglasse, können Sie sehen, dass sich der Abstand verringert. Wenn du MD Gap Four hinzufügst, wird es vorbei sein. Okay? Bei einer bestimmten Bildschirmgröße erscheint das also. Und es ist hübsch, dass du das sehen kannst , und auf einer größeren Bildschirmgröße ist es das auch. Wenn Sie also die Website betrachten, dieselbe Anwendung auf dem Desktop, erscheint sie horizontal gestapelt Bei einer kleineren Bildschirmgröße wird sie jedoch vertikal gestapelt Das ist der Beat hier drüben. Okay? Also, um zusammenzufassen, was wir hier machen , ist die ungeordnete Liste hier in ein horizontales Fleckfeld auf mittlerer Bildschirmgröße umzuwandeln ein horizontales Fleckfeld auf , okay, oder größer Und das machen wir mit Hilfe von MD Colon. Okay? Das ist ein Breakpoint , der in Tailwind CSS definiert ist, und wir nutzen ihn, okay? Ich hoffe also, dass Sie dem folgen konnten, und ich hoffe, Sie haben ein gewisses Maß an Klarheit darüber, wie das funktioniert. Jetzt zeige ich dir noch eine Sache. Ich zeige dir, wie du ein benutzerdefiniertes Theme konfigurieren oder hinzufügen kannst , um deinen Rückenwind zu Nehmen wir an, ich arbeite für ein großes Unternehmen und es gibt ein vordefiniertes Farbschema , das meine Bewerbung widerspiegeln soll Okay, das kann ich nutzen. Okay, und es schadet nicht, das anzupassen. Also kann ich zur Farbpalette gehen, okay, online. Okay, und Sie können hier drüben sehen , das ist die Farbpalette. Nehmen wir an, ich wähle diese Art von Blau hier. Okay? Und ich werde herkommen, um CSS mit Rückenwind zu konfigurieren. Was ich hier noch machen kann, ist, dass ich Farben haben werde, etwa so Okay. Ich sage Colin, so etwas Okay, ein La-Komma hier drüben. Und hier sage ich, äh, Custom Blue. Das ist mein Blau. Okay. Das spezifiziere ich, ich sage Colin und füge das in etwa so hinzu Das ist ein maßgeschneidertes Blau. Und jetzt verwende ich statt Blau hier Blau, normales Blau, richtig? Also was ich tun werde, ist , hierher zu kommen. Statt BG Blue, 500, kann ich hier Custom Blue verwenden. Ich sage benutzerdefiniertes Blau. Sie können sehen, dass BG Custom Blue als Vorschlag vorgeschlagen wurde. Ich kann sehen, ob das. Okay, das sieht nicht so cool aus. Okay. Ich muss wahrscheinlich einen Neustart durchführen, weil ich glaube, dass ich die Konfiguration geändert habe und sie nicht übernommen wird. Also lass mich neu starten und lass mich aktualisieren, okay. Also ein Problem, das ich hier sehe. Der Grund, warum das nicht angewendet wird, ist, dass ich Hash hier übersehen habe. Okay, Farbcodes sollten also mit Hash beginnen. Und sobald du das speicherst, siehst du es hier oben. Okay? Es besteht also keine Notwendigkeit, neu zu starten. Sobald Sie hier irgendeine Konfiguration ändern , ist das eine Modeerscheinung Und Sie können sehen, dass dies ein anderes Blau ist als das, was wir ursprünglich hatten Also kann ich hier mein eigenes benutzerdefiniertes Thema hinzufügen, o Ohne Probleme. Und ich kann es hier so nutzen, wie ich will. Sie können sehen, dass die Farbe auch reinkommt. Außerdem wird mir anhand dieses Plug-ins automatisch vorgeschlagen , dass ich Intellisense verwende Es ist so erstaunlich, dass es es aus der Konfigurationsdatei aufnimmt und es mir zeigt Es weiß, dass ich hier eine benutzerdefinierte Farbe konfiguriert habe. Wenn ich das speichere, können Sie sehen, wie die Farbe geändert wird. Nun, das ist ein benutzerdefiniertes Blau, das ich habe, und nicht das, was vorher existierte. Auf diese Weise kannst du hier buchstäblich eine Menge Dinge anpassen . Du kannst hier dein eigenes Theme erstellen, okay? Und Sie können Ihre eigenen Schriftarten und Ihr eigenes Thema definieren und es ohne zu zögern überall in der Anwendung verwenden ohne zu zögern überall in der Anwendung Natürlich gibt es eine sehr gute Standardbibliothek Wenn Sie jedoch an einer produktionstauglichen Anwendung arbeiten, ist dies ein übliches Szenario, Unternehmen bestimmte Farben verwenden möchten, und sie möchten, dass ihre Markenfarben in der Anwendung wiedergegeben werden. Und diese Markenfarben sind möglicherweise nicht standardmäßig vorhanden, und Sie möchten sie vielleicht hier hinzufügen. So würden Sie es hinzufügen und es kann für das gesamte Projekt verwendet werden. Ich hoffe, das war wertvoll und ich hoffe, du liebst es. 6. PROJEKT: Ein dynamisches Kartenraster mit Filtern mit React und Tailwind CSS: Die Implementierung des Dunkel- Hellmodus ist heute eine der gemeinsamen Funktionen moderner Webanwendungen Wenn Sie an einer Produktionsumgebung arbeiten, ist es sehr wahrscheinlich, dass Ihr Chef Sie bittet, diese Funktion in die bestehende Anwendung aufzunehmen , die die Benutzer verwenden. Dies ist eine erstaunliche Funktion , mit der der Benutzer das Thema nach seinen Vorlieben umschalten kann das Thema nach seinen Vorlieben umschalten Genau das werde ich Ihnen in diesem Video zeigen, in dem wir ein kleines Projekt erstellen , das Sie auf dem Bildschirm sehen, das uns hilft, zwischen Dunkel- und Hellmodus umzuschalten zwischen Dunkel- und Hellmodus Also hier, das ist die Anwendung. Es gibt nicht viel von einem Design. Es ist ziemlich einfach. Ich habe hier absichtlich etwas Text hinzugefügt, damit Sie sehen können , wie sich die Farbe des Textes je nach Thema ändert, und ich habe ein Musterelement Jetzt kannst du den Dunkelmodus hier deaktivieren. Sie können den Lichtmodus sehen und die Textfarbe wechselt zu Schwarz und der Hintergrund ist weiß. Sie können den Dunkelmodus aktivieren. Wenn Sie also nm deaktivieren, können Sie zwischen diesen beiden Modi wechseln. Und das wird grundsätzlich lokal gespeichert, diese Präferenz. Sie können dies aktualisieren und Sie befinden sich immer noch im Dunkelmodus. Wenn Sie den Dunkelmodus aktivieren oder den Dunkelmodus deaktivieren und wenn Sie aktualisieren, befinden Sie sich immer noch im hellen Modus, da Sie diese Einstellung ausgewählt haben. Okay. Die Einstellungen werden also auch im Browser des Benutzers unter Verwendung des lokalen Speichers gespeichert, und wie genau das geht, werde ich Ihnen zeigen. Implementieren Sie nun dieselbe CSS-Dokumentation von Kopf zu Rücken und führen Sie hier eine schnelle Suche durch und suchen Sie nach dem Dunkelmodus. Okay? Nun, wie man zur Dokumentation kommt, zeige ich Ihnen. Sie können also auf der Website hierher kommen und sagen „Los geht's“ oder Sie können auch hier suchen. Du kannst hier Dunkelmodus sagen und du kommst hierher. Okay. Sie werden also erstaunt sein, dass es standardmäßig den Dunkelmodus unterstützt. Okay? Also da steht, ähm, Rückenwind ermöglicht es dir, diese Funktion zu nutzen, und was du tun kannst, ist, dass du sie auf diese Weise aktivieren kannst Man kann sagen: Dunkelmodus, Hellmodus. Es ermöglicht Ihnen also im Grunde, eine dunkle Variante einzubeziehen. Es heißt also, dass Tailwind eine dunkle Variante beinhaltet, mit der Sie Ihr Sehvermögen anders gestalten können, wenn diese Option aktiviert ist Sie können also einen dunklen Doppelpunkt und das Farbschema oder den Stil hinzufügen das Farbschema oder , den Sie haben möchten, wenn der Dunkelmodus aktiviert ist Du kannst das also hier machen. Du kannst dunkel sagen. Im Dunkelmodus möchte ich also den Hintergrund als Schiefer haben. Okay. Und im Dunkelmodus möchte ich weißen Text haben. Die Textfarbe sollte auch so sein. Okay? Das ist etwas , das du definieren kannst. Und dann können Sie in Tailwind CSS leider kein Tailwind-CSS machen In der Konfigurationsdatei können Sie lediglich eine kleine Änderung an der Konfigurationsdatei vornehmen eine kleine Änderung an der Konfigurationsdatei In der Konfliktdatei müssen Sie also nur diesen Dunkelmodus, die Kühlung und den Selektor hinzufügen Kühlung und den Selektor In unserem Fall wird der Selektor jetzt hier drüben sein. Ich zeige dir, wie du das umsetzen kannst. Okay. Und wann immer du Klasse sagst, okay, wird es im Grunde genommen auf der Grundlage dieses CSS , das du angewendet hast Lassen Sie mich das implementieren und es Ihnen zeigen, aber das ist eine Dokumentation , die ich hervorheben wollte Okay? Du kannst es hier sehen. Der gesamte Code ist hier angegeben, okay? Du kannst dir das einfach ansehen. Okay. Ich würde einfach gerne hier zur IDE wechseln. Im Moment wird buchstäblich kein Code hinzugefügt. Also werden wir anfangen, Code zu schreiben , der uns bei der Implementierung hilft. Okay? Also, was ich tun werde, ist hier, zuerst in Dev, Klassennamen zu sagen. Okay. Ich füge ein paar Kurse hinzu. Ich sage Polsterung von vier. Okay, BG von Weiß. Also das ist ein Standardhintergrund. Okay. Und ich füge mindestens einen H-Bildschirm hinzu. Okay. Hoppla. So etwas wie das hier Okay. Und hier drüben werde ich jeden einzelnen sagen, okay? Und hier sage ich Willkommen bei Talk. Modus. App so etwas. Okay. Und hier kann ich sagen, dass Klassenname Text ist, iPhone bis Excel. Okay? Sie können die Welcome to Dark Mode App sehen. Okay. Und ich füge PTAC hinzu, und ich sage, das ist ein Beispiel für die Implementierung des Dunkelmodus mit CSS. Okay. Also du kannst sehen, dass das reingekommen ist. Okay? Nun, wir werden eine Komponente hinzufügen, die es uns ermöglicht, hier umzuschalten Okay. Also ich sage hier, ich nenne das Tar-Modus-Umschalten Diese Komponente existiert nicht, aber wir können die Komponente zuerst erstellen Das ist etwas, das ich tun kann. Ich kann hier Dark Mode, Toggle, Sex sagen und ich kann Const sagen Im Grunde wird diese Komponente die gesamte Logik haben. Ich kann also Const-Funktion und Dunkelmodus, Umschalten, so etwas sagen und Dunkelmodus, Umschalten, , und ich werde es Ich werde hier die Pfeilfunktionen verwenden. Jetzt, okay. Okay, ja, ich glaube, okay, ich habe hier einen Syntaxfehler gemacht. Ich werde das einfach loswerden. Okay. Also ja, das ist okay. Und jetzt sage ich Export, Standard, Talk More Toggle, so etwas Okay, und ich lasse das hier importieren. Ich sage t, mehr Toggle. So wie. Okay. Jetzt fange ich an, hier etwas Code hinzuzufügen. Also, was wir tun werden, ist hier, ich werde eine Schaltfläche hinzufügen. Okay. Also zuerst sage ich zurück, okay? Kehre hier und hier zurück. Ich sage, gib einen Knopf zurück. Also brauchen wir dafür eine Taste, die den Schalter steuert Okay? Also wird der Knopf dunkel werden. Also das ist ein Text. Ich werde diesen Text ändern, aber lassen Sie uns vorerst diesen Text haben. Okay. Ich sehe mir zuerst den Klassennamen an. Okay, Klassenname. Ich nehme diese neue Linie. Okay. Nun, was ist der Klassenname, den ich angeben möchte? Ich sage P zwei, PT oder Grau 200. Okay, Grau von 200, und ich sage, Text auf grauem Bildschirm hat 800 Buchstaben C, und ich glaube, das ist es, glaube ich, rund. Ich füge gleich hier eine Runde hinzu. Okay, das ist also der Knopf, den wir haben. Okay, beim Klick passiert noch nichts, aber ich füge beim Klicken Lesner Was wir also beim Klicken tun müssen, ist Theta-Modus einzustellen, zu aktivieren und zu deaktivieren Okay. Und dafür werde ich den Zustand E nutzen. Ich werde hier in der Funktion einen Status benötigen. Okay, also ich sage const, o und ich sage ist TAC-Modus, und ich sage set ist TAC-Modus Also das ist die Okay, das ist die Funktion, tut mir leid, nicht Das ist der Staat. Ich sage „Status verwenden“. Und ich sage hier drüben. Also werden wir den lokalen Speicher nutzen , okay? Also ich sage hier drüben. Oder so etwas in der Art. Okay. Sagen wir, innerhalb eines US-Bundesstaates füge ich die Pfeilfunktion hinzu. Und hier sage ich zurück. Okay, lokaler Speicher, Punkt, Artikel holen. Also verwende ich den lokalen Speicher, und das ist der Schlüssel hier. Also, welches Theme der Benutzer angewendet hat, das ist es, was ich aus dem lokalen Speicher bekomme. Okay, und ich sage , es ist gleich dunkel. Also, wenn das dunkel ist, wird das wahr sein, sonst wird es falsch sein und ich kann das tatsächlich als Zeichenfolge haben. Okay? Und ich werde einen strengen Vergleich anstellen. Okay. Also das ist erledigt, okay? Wir haben jetzt einen Status, und was ich hier machen werde , ist ein Klick, ich kann sagen, also wenn der Benutzer klickt, werde ich sagen, hier drüben, also so. Okay. Und hier, lass mich das entfernen. Ich würde sagen, Set ist Dunkelmodus. Und ich werde alles rückgängig machen, was im Stark-Modus da ist. Okay? Dadurch wird also sichergestellt , dass der Wert immer umgekehrt wird, wenn Sie klicken Es wird also immer umgeschaltet, wenn Sie darauf klicken. Das wird dadurch sichergestellt. Was ich jetzt tun werde, ist E, den Effect-Hook hier drüben zu verwenden. Okay? Also, diese ganze Sache, wie ich schon sagte, wird von diesem Auserwählten hier kontrolliert. Diese dunkle Variante. Was ich meine ist. Also muss ich überall die dunkle Variante hinzufügen. Okay? Also was ich tun werde, ist als Erstes. Ich werde das zur Schaltfläche selbst hinzufügen . Ich werde also herkommen. Und hier in der Schaltfläche sage ich, dunkel ist dunkel, Colin, BG, grau, und ich nehme G Grau von sagen wir 900, ziemlich dunkel Und dann kann ich dunkel haben. Ich brauche auch Text. Text ist weißer weißer Text, ungefähr so. Das ist erledigt. Wenn sich das jetzt ändert, müssen wir nur noch den Use-Effekt nutzen. Also werde ich hier den Use Effect Hook verwenden. Lassen Sie mich das ein wenig erweitern, verwenden Sie Effect. Was machen wir nun mit Use Effect? Ich werde das auf der Grundlage der Wertänderung im Dunkelmodus umdrehen . Was ist also die Syntax für Use Effect? Wir werden so etwas haben. Wir haben eine Funktion, Syntax und wir haben ein Abhängigkeitsarray. Nun, Unabhängigkeits-Array, was wir brauchen, ist der Dunkelmodus. Wenn sich dieser Wert ändert, führen Sie diesen Nutzungseffekt Darin brauchen wir nun die Logik. Okay? Also sage ich Dokument, Punkt, Dokumentelement, Punktklassenliste. Okay. Also füge ich diese Klasse namens TAC Ich sage tot, füge hinzu, weil dunkel die Variante ist, oder? Also sage ich hier drüben, TAC, so etwas in der Art. Also wird es überall die dunkle Variante hinzufügen überall die dunkle Variante Okay. Und ich werde auch den lokalen Speicher aktualisieren. Ich sage Lokaler Speicher, Punkt Set Item. Okay. Ich sage Team, also mache ich den Wert für sie rückgängig. Ich sage Tak, etwas Ähnliches. Okay? Werde das los. Okay? Also das ist erledigt. Das ist okay, wir müssen das tun, wir müssen das unter bestimmten Bedingungen ausführen, also müssen wir sagen, ob es sich um einen Dunkelmodus Es ist Dunkelmodus, so etwas. Also lass mich. Wenn der Dunkelmodus wahr ist, machen wir das. Ich muss den Else-Block ausführen. Ich kopiere das. Ich werde mich hier anders umsehen und das zusammenbauen. Wenn das da ist, sage ich hier Klassenliste, Punkt, Dokumentelement entfernen Klassenliste Dokumentelement entfernen Klassenliste Punkt Entfernen Dunkel. Okay, das wird Dunkelheit hinzufügen und das wird Dunkelheit entfernen. Und hier sage ich Licht. Ich hoffe, das macht Sinn. Lassen Sie uns das jetzt testen. Mal sehen, wie das funktioniert. Lass mich das zusammenklappen, siehst du. Ups, das wird nicht funktionieren. Das wird also nicht funktionieren, weil ich das nicht zu meiner Konfiguration hinzugefügt habe Ich muss hierher gehen. Ich komme her. Ich sage Dark Mode, Colon Glass. Okay. Lass mich sehen. Okay, ungültiger Bereich, da steht, okay, es gibt ein Problem und das Problem liegt wahrscheinlich in der Syntax. Okay, das wäre also in einem einzigen Code. Und wenn du es jetzt siehst, du kannst sehen, dass es sich verändert. Was also passiert, hängt vom Wert des Dunkelmodus ab, ob die Klasse angewendet und entfernt wird. Ja, du kannst diese Klasse in der gesamten Klassenliste sehen, dunkel wird angewendet und entfernt. Je nachdem, welcher Wert hier drüben ist. Und was ist dunkel? Dunkel ist das. Okay? Nun, was wir tun können, ist dass wir das überall anwenden können. Wir können dies auch in App Dot JSX anwenden. Okay. Was ich tun werde, ist in app.j6, ich füge Hintergrund Okay. Also hier in DIV, hier in Dev kann ich sagen: dunkel, okay, dunkel von Colin Ich kann PG Grau BG Grau oder sagen wir 900 sagen, ein bisschen dunkel Ich würde sagen, dunkel ist weißer Text. Text in Weiß, so etwas. Okay. Ich habe das gemacht und jetzt lass uns den Dunkelmodus sehen, du siehst, er wechselt jetzt, oder? Das haben wir uns also ausgedacht. Und wenn Sie hierher kommen, wenn Sie es im Vollbildmodus sehen, ist das die Anwendung . Du kannst es sehen. Auch wenn Sie aktualisieren, weil wir lokalen Speicher verwenden . Jetzt zeige ich Ihnen, wie es im lokalen Speicher gespeichert wird. Gut inspizieren, klicken Sie mit der rechten Maustaste auf Inspizieren, gehen Sie zur Anwendung und gehen Sie hier in den lokalen Speicher. Wenn ich also hier im lokalen Speicher etwas herauszoome, haben Sie diesen lokalen Host 1573 Sie werden also den Wert von ihnen hier sehen. Also das ist der Ort, an dem wir lagern. Also das wird sich ändern. Das kannst du sehen. Es wird also hier aufbewahrt. Und wenn du Cookies und so löschst, wird das gelöscht. Wir verwenden den lokalen Speicher hauptsächlich, um den Dunkelmodus zu implementieren. Okay. Ich hoffe, das macht Sinn. Zusammenfassend lässt sich sagen, dass Tailwind diese eingebaute Unterstützung für den Dunkelmodus hat , okay? Und es enthält eine dunkle Variante , die Sie auf diese Weise nutzen können Sie können also alle Stile, die Sie haben möchten, mit der dunklen Variante implementieren , okay? Und dann kannst du hier im Dunkelmodus Selector sagen Also Selector ist klasse hier drüben, okay? Sie können also sehen, dass die Selektorstrategie diese Klassenstrategie ersetzt hat Okay, das ist momentan die Selektor-Strategie. Das ist das neueste Update hier drüben. Also, wenn ich hier den Selector verwende, lassen Sie uns sehen, ob das funktioniert Okay, also kann ich das mit Selector aktualisieren. Sie können sehen, Okay, es ist also tatsächlich in der neuesten Version, Selector sollte verwendet werden Okay? Ich habe Unterricht benutzt, aber der Unterricht ist auch in Ordnung, okay? Aber Selector ist etwas, das Sie verwenden können. Das ist völlig okay. Alles klar? Weil ich glaube, dass ausgewählte Klasse in der kommenden Version nicht gültig sein wird. Verwenden Sie also unbedingt den Selector, okay? Die Klasse ist auch dieselbe. Es bedeutet dasselbe. Und du kannst sehen, dass es weiß sein wird. Okay, wenn der Dunkelmodus nicht aktiviert ist und wenn der Dunkelmodus aktiviert ist, dann passiert Folgendes. Was also passiert, ist, wenn Sie den Dunkelmodus aktivieren, okay, da wird diese Klasse zu HTML hinzugefügt, die als Dark bezeichnet wird. Wenn das jetzt angewendet wird, ist alles, was im Dunkeln steht, anwendbar, und das ist nicht mehr gültig, okay? Also dieses Ding wird hinzugefügt, dieses Attribut wird hinzugefügt, und deshalb siehst du, dass die gesamte Anwendung dunkel wird , weil du überall dunkle Selektoren hast Sie verwenden diese Selektoren überall, oder? Wo immer Sie also etwas mit Dark definiert haben , zeigt es das Okay? Also ja, so funktionieren die Dinge, und ich hoffe, es hat Ihnen Spaß gemacht diese kleine Dark-Mode-Anwendung zu erstellen. Ordnung. Also ich hoffe, das war nützlich. 7. Schlussbemerkung zum Kurs: Nun, herzlichen Glückwunsch zum Abschluss dieses Kurses. Sie haben einen langen Weg zurückgelegt, um die Integration von Tailwind CSS und React zu beherrschen , um reaktionsschnelle, anpassbare und visuell beeindruckende Anwendungen zu entwickeln anpassbare und visuell beeindruckende Von der Einrichtung Ihres Projekts bis hin zur Implementierung erweiterter Funktionen wie dem Dunkelmodus verfügen Sie jetzt über die Fähigkeiten, moderne Webanwendungen zu entwerfen , die auf jeder Bildschirmgröße gut aussehen auf jeder Bildschirmgröße gut Ihr Abschlussprojekt, eine voll funktionsfähige React-Anwendung mit Dunkelmodus ist ein Beweis das praktische Wissen , das Sie in diesem Kurs erworben haben . Denken Sie daran, dass es bei Tailwind CSS nicht nur darum geht, Zeit zu sparen , sondern Ihnen auch kreative Freiheit zu geben und komplexe Designs zu vereinfachen Ich ermutige Sie, weiterhin mit den Funktionen von Tailwinds zu experimentieren und sie in Ihren zukünftigen Projekten anzuwenden sie in Ihren zukünftigen Projekten Teilen Sie die Arbeit auch mit der Community und zögern Sie nicht, die Lektionen erneut zu lesen, falls Sie eine Auffrischung benötigen In diesem Kurs findest du ein Klassenprojekt, das du dir ansehen und es mit der gesamten Klasse teilen kannst ansehen und es mit der gesamten Klasse teilen , um Feedback zu Danke, dass du diese Reise mit uns gemacht hast. Ich freue mich sehr, Teil dieser besonderen Reise zu sein, und ich kann es kaum erwarten, die Anwendungen zu sehen, die Sie mit React und Tailwind CSS erstellen werden Viel Glück und viel Spaß beim Programmieren.