Erstellen Sie eine Website mit React- und Rückenwind -CSS

Dieses Tutorial zeigt, wie Sie eine Produktwebsite mit React und Tailwind CSS erstellen. Wir werden mit dem REACT -REACT mit Tailwind -CSS mithilfe von Creat React App Configuration Override (CRACO) eingerichtet. Die CSS -Dienstprogrammklassen und Varianten von Tailwind und wie man sie benutzt; So machen Sie die Website Dark -Modus einfach kompatibel; welche Gruppen sind; und wie man Varianten aktiviert.

Sie können eine Demo der hier erstellten Website anzeigen und den Code für dieses Repository in diesem Github -Repository finden.

Key Takeaways

• Verwenden Sie die React -App und den Craco erstellen, um React mit Rückenwind -CSS effizient einzurichten, wodurch die Komplexität der manuellen Konfiguration vermieden wird.
• Nutzen Sie den Tailwind CSS -Dienstprogramm und Varianten, um Komponenten leicht zu stylen, ohne umfangreiche benutzerdefinierte CSS zu schreiben.
• Implementieren Sie den Dunklen Modus mit einfachen Konfigurationsänderungen in den Rückenwind -CSS, um sich an die Betriebssystemeinstellungen des Benutzers anzupassen.
• Erforschen Sie die Leistung von Dienstprogrammklassen für reaktionsschnelle Design- und Pseudoklassen, wodurch das Styling dynamischer und flexibler wird.
• Das Thema von Tailwind passen Sie die Markenbedürfnisse an, indem Sie Farben, Schriftarten und andere Elemente direkt in der Konfigurationsdatei ändern.
• Verwenden Sie Tailwind CSS -Plugins und erweitern Sie die Funktionalität um zusätzliche Stile, Dienstprogramme und benutzerdefinierte Komponenten.
• Aktivieren Sie spezifische Rückenwind -CSS -Varianten für schwebende Zustände und reaktionsschnelle Anpassungen und verbessern Sie interaktive und reaktionsschnelle Aspekte der Website.

Voraussetzungen

Bevor wir beginnen, müssen Sie Node.js und NPM installieren lassen. Wenn Sie Node.js installiert haben, haben Sie NPM installiert.

Um zu überprüfen, ob der Knoten installiert ist, führen Sie Folgendes in der Befehlszeile aus:

<span>node -v
</span>

Sie sollten die Version sehen können. Tun Sie dasselbe für NPM:

<span>npm -v
</span>

Es ist zu beachten, dass Rückenwind -CSS node.js Version 12.13.0 oder höher erforderlich ist.

Wenn Sie einen Fehler für beide erhalten, müssen Sie einen Knoten installieren. Sie können die Installationsanweisungen auf der Node -Website befolgen oder in unserem Artikel „Installieren mehrerer Versionen von node.js mit nvm“ folgen.

.

Einrichten von React- und Rückenwind -CSS

Hinweis: Wenn Sie mit der React -App erstellen Sie nicht vertraut sind, lesen Sie zuerst "React App: REACT -Projekte bereit".

Erstellen Sie zunächst ein React-Projekt mit Create-React-App:

npx create-react-app react-shop

Wechseln Sie dann das Verzeichnis in das erstellte Projekt:

<span>cd react-shop
</span>

Als nächstes installieren wir die Abhängigkeiten, die für Rückenwind -CSS erforderlich sind:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Wir installieren Tailwind -CSS mit dem POSTCSS 7 -Kompatibilitätsbau, da Create React App (oder CRA) zum Zeitpunkt des Schreibens dieses Artikels nicht unterstützt. Wir installieren auch Autoprefixer, da es für Tailwind CSS nach Version 2.0 erforderlich ist.

CRACO

einrichten

Um CRA zu konfigurieren, müssen Sie in der Regel Reaktionen aus dem Eject oder NPM ausführen, um die Standardskripte von CRA auszuführen. Dies ist jedoch sehr unpraktisch, da alle Konfigurationen, die in CRA (z. wird nicht mehr unterstützen.

Hier kommt die React App -App -Konfiguration (oder CRACO) ins Spiel. Craco ist eine Bibliothek, die CRA eine einfache Konfigurationsebene hinzufügt. Anstatt alle Konfigurationen innerhalb von CRA in Ihr Projekt auszuschalten - zum Beispiel, um WebPack nur eine Konfiguration hinzuzufügen - werden alle neuen Konfigurationen oder Änderungen an der ursprünglichen Konfiguration in eine neue Datei Craco.config.js eingefügt. Mit Craco können Sie CRA konfigurieren, um das Beste ohne den Ärger herauszuholen.

Wir benötigen hier Craco, um PostCSS -Konfigurationen zu überschreiben und das TailwindCSS -Plugin hinzuzufügen. Lassen Sie es uns zuerst installieren:

<span>node -v
</span>

Bei der Verwendung von CRA sehen die Skripte in package.json so aus:

<span>npm -v
</span>

Da wir Craco verwenden, um das zu tun, was wir mit CRA nicht tun können, müssen wir die Skripte ändern, um Craco zum Erstellen des Projekts zu verwenden oder es in der Entwicklung zu betreiben:

npx create-react-app react-shop

Wir haben React-Skripte durch Craco im Start-, Bau- und Testskripte ersetzt. Wir haben keine Änderungen am Auswahlskript vorgenommen.

Erstellen Sie als nächstes die Craco -Konfigurationsdatei craco.config.js im Stamm

<span>cd react-shop
</span>

Diese Konfigurationsdatei fügt die Tailwindcss und Autoprefixer -Plugins zu postcss hinzu.

Jetzt generieren wir die Konfigurationsdatei für Rückenwind -CSS:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Hinweis: Wenn Sie Node.js v14 verwenden, gibt es ein gemeldetes Problem über einen Fehler, der beim Ausführen dieses Befehls mit dem Aufschluss von Modul "autoprefixer" nicht finden wird. Die Aktualisierung von node.js v15 sollte funktionieren. Wenn Sie dies jedoch nicht tun können, folgen Sie bitte einem der Problemumgehungen hier.

Dies erstellt die Datei tailwind.config.js im Root des Projekts. Es wird den folgenden Inhalt haben:

<span>npm install @craco/craco
</span>

Hier ist, was jede der Konfigurationsschlüssel bedeutet:

1. Spülung: Dies wird verwendet, um die Dateien zu festlegen, die das CSS -Wind -CSS scannen und sehen sollten, welche CSS -Klassen des Rückenwinds verwendet werden, damit alle ungenutzten Stile und Klassen in der Produktion entfernen können.
2. darkMode: Dies gibt das Verhalten des Dark -Modus in Ihrem Projekt an. Der Wert kann Medien sein - was bedeutet, dass das Dark -Modus -Styling basierend auf der Abfrage "Media Media" angewendet wird, die vom Standardmodus für das Betriebssystem des Benutzers abhängt. Es kann auch eine Klasse sein, was bedeutet, dass das Dark -Modus -Styling angewendet wird, wenn ein übergeordnetes Element im HTML -Dokument die dunkle Klasse hat.
3. Thema: Dies kann verwendet werden, um die Farbpalette des Themas, der Schriftarten, der Haltepunkte und vieler mehr zu ändern. Wir werden sehen, wie Sie später im Tutorial Änderungen am Thema vornehmen können.
4. Varianten: Auf diese Weise können Sie zusätzliche Varianten auf die Kern -Plugins von Rückenwind -CSS anwenden. Wir werden sehen, wie es später im Tutorial funktioniert.
5. Plugins: Ein Abschnitt zum Hinzufügen von Plugins, mit denen zusätzliche Dienstprogrammklassen, benutzerdefinierte Varianten, Basisstile oder mehr hinzugefügt werden können.

vorerst werden wir nur zwei Änderungen vornehmen. Zunächst ändern wir den Säuberungsschlüssel:

<span>node -v
</span>

Dies fordert Tailwind CSS an, alle JS-, JSX-, TS- und TSX -Dateien im SRC -Verzeichnis sowie in der Datei öffentlich/index.html zu schauen, um herauszufinden, welche Klassen von Rückenwind -CSS verwendet werden und unbenutzte Klassen entfernen werden. 🎜>

Die zweite Änderung ist für den Dunklen Modus:

<span>npm -v
</span>

Um der Einfachheit in diesem Tutorial zu willen, halten wir den Dunklen Modus nur auf der Grundlage der Betriebssystempräferenz des Benutzers.

Der letzte Schritt bei der Einrichtung unseres React -Projekts mit Tailwind CSS besteht darin, einige der Tailwind -CSS -Stile in src/index.css aufzunehmen. Ersetzen Sie den Inhalt dieser Datei durch Folgendes:

npx create-react-app react-shop

Die @TailWind -Anweisung importiert im Grunde genommen die Stile in Index.css. Und standardmäßig importiert CRA src/index.css in src/index.js:

<span>cd react-shop
</span>

Dies bedeutet, dass in unserem React -Projekt Rückenwind -CSS -Stile angewendet werden, und wir sind bereit, eine schöne Website zu erstellen!

Verständnis von Tailwind CSS -Dienstprogrammen und Varianten

Bevor wir uns mit der Codierung befassen, verstehen wir, welche Schwankungswind -CSS -Dienstprogrammklassen und Varianten sind. Tailwind CSS wurde entwickelt, um Styling -Komponenten zu vereinfachen und sich auf wiederverwendbare Komponenten zu konzentrieren. Versorgungskurse sind eine breite Palette von Klassen, mit denen Sie Ihre Komponente auf eine Weise stylen können, die Sie sich vorstellen können, ohne CSS zu schreiben.

Zum Beispiel, um ein

Element mit einem Rand zu stylen, die Schriftgröße zu ändern, Hintergrund und Textfarbe zu ändern, müssen Sie so etwas mit CSS schreiben:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Verwenden von Tailwind -CSS können Sie dies nur mit den Dienstprogrammklassen tun:

<span>npm install @craco/craco
</span>

Hier ist, was jede Klasse in diesem Beispiel bedeutet:

1. Grenze: Setzt die Randbreite auf 1px
2. Border-Red-100: Setzt die Randfarbe in einen rotlichen Schatten (basierend auf dem Thema)
3. text-lg: gibt Schriftgröße 1.125Rem und Zeilenhöhe 1.75rem
4. BG-RED-400: Setzt die Hintergrundfarbe auf einen roten Farbton (basierend auf dem Thema)
5. text-weiß: Setzt die Textfarbe auf weiß

Es gibt viele andere Klassen, die Sie verwenden können, mit vielen verschiedenen Farbentönen, was das Thema erleichtert. Unter Verwendung der Dienstprogrammklassen müssen Sie selten tatsächlich irgendwelche CSS schreiben.

Okay, aber was ist mit Medienfragen? Was ist mit PSUDO -Klassen? Was ist mit dem Dunklen Modus? Können diese erledigt werden, ohne selbst CSS schreiben zu müssen?

, wenn Varianten hereinkommen. Mit Varianten können Sie Elementen basierend auf Geräte -Haltepunkten, Elementenzuständen hinzufügen oder ob der Dunkelmodus aktiviert ist oder nicht.

zuvor haben Sie dies möglicherweise getan, um die Breite eines Elements basierend auf der Größe des Geräts zu ändern:

<span>node -v
</span>

Mit Rückenwind -CSS kann es einfach wie folgt gemacht werden:

<span>npm -v
</span>

Dies gilt die W-1/2-Klasse (was bedeutet Breite: 50%), wenn die min-Breite: 1025px für die aktuelle Bildschirmbreite gilt, die W-3/4-Klasse (was bedeutet Breite: 80%) bei min gilt -Width: 768px gilt für die aktuelle Bildschirmbreite und gilt W-Full-Klasse (was Breite bedeutet: 100%;), wenn die anderen Varianten nicht mehr zutreffen.

Dies macht die mühsame Arbeit, die Sie in jedem Projekt leichter und schneller machen müssen, definitiv. Zunächst mag es verwirrend aussehen, aber wenn Sie sich mehr damit beschäftigen, werden Sie erkennen, wie es zur zweiten Natur wird, die Dienstprogrammklassen und Varianten zu verwenden.

Sie können mehr über die Konfiguration von Tailwind in der offiziellen Dokumentation des Projekts lesen.

Implementieren unserer Komponenten

Zurück zu unserer Website. Wir erstellen eine einfache Website, auf der Produkte in einem ordentlichen Design angezeigt werden. Der Einfachheit halber verwenden wir gefälschte Daten von Fake Store API. Anstatt die Anfragen an die API auszuführen, werden wir eine Beispiel -JSON -Antwort aufnehmen und in eine JSON -Datei in unserem Projekt aufnehmen. Auch dies ist nur für die Einfachheit des Tutorials.

Gehen Sie zum Produktendpunkt und kopieren Sie die Antwort. Erstellen Sie dann die Datei src/data/products.json und fügen Sie die Antwort darin ein. Es sollte eine Reihe von Objekten sein, die diesem ähnlich sind:

npx create-react-app react-shop

Beginnen wir mit der Implementierung der Produktkomponente. Diese Komponente ist eine Kartenkomponente, die Informationen zum Produkt anzeigt. Erstellen Sie SRC/Komponenten/product.js mit dem folgenden Inhalt:

<span>cd react-shop
</span>

Wie Sie sehen, zeigt die Produktkomponente nur die Produktdetails an. Wir haben momentan keine Klassen für das Styling hinzugefügt.

Gehen Sie als nächstes zu src/app.js und ändern Sie den Inhalt in Folgendes:

<span>node -v
</span>

Hier importieren wir die Datei productS.json als Produkte. Anschließend werden wir über Produkte überschreiten und jedes Produkt mit der zuvor erstellten Produktkomponente anzeigen. Beachten Sie erneut, dass wir keine Klassen zum Styling hinzugefügt haben.

Starten wir jetzt den Server. Führen Sie den folgenden Befehl aus:

<span>npm -v
</span>

Sie werden sehen, dass es nur eine Reihe von Text gibt, aber keinerlei Styling.

Hinzufügen von Hintergrundfarbe

Lassen Sie uns etwas Styling hinzufügen. Zunächst ändern wir die Hintergrundfarbe der Seite. Dazu verwenden wir die Hintergrundkurs von Tailwind. Die Hintergrund-Farbklassen befinden sich im Format bg- {color}-{numericscale}, wobei NumericsCale optional ist.

Die Farben standardmäßig können weiß, schwarz, grau, rot, blau, grün, gelb, orange, Indigo, Lila und Rosa sein. Die numerische Skala definiert den Farbton der Farbe, wobei 50 der leichteste Farbton und 900 der dunkelste ist. Wenn beispielsweise die Hintergrundfarbe hellrot ist, können Sie BG-RED-200 verwenden.

In unserer Website setzen wir die Hintergrundfarbe auf hellgrau, sodass wir die Klasse BG-Gray-200 dem äußersten

-Element in SRC/app.js:

hinzufügen:

npx create-react-app react-shop

Wenn Sie jetzt die Website überprüfen (wenn Sie den Server noch nicht ausgeführt haben, stellen Sie sicher, dass Sie ihn erneut ausführen), dass sich der Hintergrund in einen hellen Graufarbton geändert hat.

Ändern der Inhaltsbreite

Als nächstes werden wir die Breite des Inhalts auf 50% der tatsächlichen Breite des Bildschirms ändern, wenn die Breite des Bildschirms mindestens 768px beträgt. Wir werden die Breitenkurse von Tailwind verwenden, die wir vor ein wenig übergegangen sind. Die Breitenklassen befinden sich im Format w- {Größe}, wobei die Größe ein Bereich von 0 bis 96 betragen kann, was sich auf einen Wert in REM bezieht; ein Verhältnis wie 1/2 oder 3/5 oder andere Verhältnisse, die sich auf einen Prozentsatz beziehen; oder ein Schlüsselwort wie Auto für die automatische Breite oder voll für 100% Breite.

Um die Breite basierend auf einer Bildschirmgröße anzugeben, verwenden wir Varianten wie SM, MD, LG usw. Diese Varianten geben die minimale Bildschirmgröße an, die für die Anwendung einer Regel erforderlich ist.

In unserem Fall möchten wir die MD-Variante mit W-1/2:

<span>node -v
</span>

Die Breite wird nun in die Hälfte der Breite des Bildschirms geändert. Es wird jedoch viel besser sein, es horizontal zu zentrieren. Dazu verwenden wir den Margin -Utility -Klassen von Tailwind. Die Randklassen befinden sich im Format M {Seite}-{Wert}, wobei die Seite optional ist und entweder für jede Seite des Elements wie t für obere, b für unten, l für links und R für rechts oder spezifisch sein kann oder spezifisch oder spezifisch ist Horizontal mit y oder vertikal mit x. Der Wert kann im Bereich von 0 bis 96 liegen, kann PX für nur 1px oder automatisch betragen. Nicht nur das, sondern Sie können auch eine negative Marge hinzufügen, indem Sie dem Beginn der Klasse hinzugefügt werden. Zum Beispiel -m -2.

Da wir das Element horizontal zentrieren, verwenden wir MX-Auto:

<span>npm -v
</span>

Und Sie können sehen, dass es zentriert ist.

Styling der Produktkomponente

Gehen wir nun mit der Produktkomponente fort. Wir werden auch eine Hintergrundfarbe für die Produktkarte hinzufügen. Wir werden es weiß machen, damit wir BG-White verwenden. Wir werden auch die volle Breite machen, damit wir W-Ful verwenden. Um die Produktkarten voneinander zu trennen, werden wir den Elementen mit MB-5 einen Rand unten hinzufügen:

npx create-react-app react-shop

Und Sie können die Änderung auf der Website sehen:

Wie Sie in unserer Produktkomponente, im äußersten Element sehen können, haben wir zwei Elemente, eines hat ein Hintergrundbild des Produkts und ein anderes mit den Informationen. Wir wollen sie nebeneinander anzeigen. Das erste, was wir tun müssen, ist die Anzeige der äußersten

in Biegen zu ändern. Dazu verwenden wir die Displaykurse von Throwswind. Im Gegensatz zu den vorherigen Klassen, die wir erwähnt haben, haben Displaykurse kein Format. Sie sind nur der Name des gewünschten Displays. Um die Anzeigeeigenschaft eines Elements in Flex zu ändern, fügen Sie einfach die Flex -Klasse hinzu:

<span>cd react-shop
</span>

Als nächstes ändern wir die Breite der

-Elemente mit den Breitenklassen wie zuvor:

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Wenn Sie jetzt die Website überprüfen, werden Sie feststellen, dass Bild und Text jetzt nebeneinander liegen.

Hinzufügen eines Abstands

Es gibt noch viel zu beheben. Fügen wir zunächst einige Polsterung für den Produktinformationsbehälter hinzu. Dazu verwenden wir den Padding -Klassen von Rückenwind. Die Polsterklassen ähneln genau den Randklassen, die wir zuvor überprüft haben, außer dass wir P anstelle von m.

verwenden

Also werden wir dem Produktinformationsbehälter P-5 hinzufügen. Mit MT-4:

fügen wir dem Beschreibung Container auch einen gewissen Spielraum hinzu

<span>npm install @craco/craco
</span>

Wir fügen auch den gesamten Container in Src/App.js den oberen und unteren Rand hinzu, so dass die ersten und letzten Produkte nicht direkt am Rande der Seite von beiden Seiten liegen. Dazu fügen wir die Klasse PY-4 hinzu:

<span>node -v
</span>

Wir werden sehen, dass die Website jetzt besser aussieht.

Verbesserung der Typografie der Komponente

Arbeiten wir jetzt ein wenig an der Typografie. Sie können sehen, dass die Produktinformationen alle gleich aussehen. Wir können den Titel nicht von der Kategorie von der Beschreibung usw. unterscheiden. Lassen Sie uns zunächst die Farbe einiger Text ändern. Zu diesem Zweck verwenden wir die Text -Farbkurse von Throwswind. Das Format für diese Klassen ähnelt den Hintergrundfarben, ersetzen jedoch B durch Text. Um beispielsweise die Farbe Ihres Textes grün zu gestalten, fügen Sie den Klassentext-Green-100 hinzu.

Ändern wir also die Textfarbe der Kategorie in Text-Gray-400, um sie im Vergleich zu einem anderen Text ein wenig verblasst zu machen, und ändern Sie die Preisfarbe der Preistext in Text-RED-500, um sie hervorzuheben. Wir werden dem Preis auch eine oberste Marge hinzufügen, um sicherzustellen, dass es am meisten fällt:

<span>npm -v
</span>

Wenn Sie jetzt zur Website gehen, sehen Sie, dass der Text in Bezug auf die Unterscheidung zwischen den verschiedenen Teilen etwas klarer aussieht:

Ändern wir als nächstes die Schriftgröße. Dazu verwenden wir die Schriftgrößenklassen von Throwswind. Das Format für diese Klassen ist text- {Größe}, wobei die Größe von sm bis 9xl.

reicht

Wir werden die Schriftgröße des Preises größer, indem wir den Klassentext-4xl für Bildschirme mit mindestens 768px mit der MD-Variante und Text-XL für kleinere Bildschirme hinzufügen, und wir werden den Titel machen Größer durch Hinzufügen des Klassentext-2xl für Bildschirme mit einer Breite von mindestens 768px:

npx create-react-app react-shop

Der Text sieht jetzt viel besser aus.

Positionierung des Produktbildes

Fixieren wir das Bild als nächstes, damit es vollständig angezeigt wird, und positionieren Sie das Hintergrundbild richtig.

Erstens ändern wir die Hintergrundbildgröße. Dazu verwenden wir die Hintergrundgrößenklassen von Throwswind. Das Format dieser Klassen ist bg- {Größe}, wobei die Größe automatisch, enthalten oder bedeckt sein kann. In unserem Fall wird es BG-Contain sein, sicherzustellen, dass das gesamte Bild gesehen wird.

Zweitens ändern wir das Attribut des Hintergrund -Wiederholung, um sicherzustellen, dass sich das Bild nicht mehrmals wiederholt. Dazu verwenden wir den Hintergrund -Wiederholungsklassen von Throwswind. Das Format für diese Klassen ist BG- {RepeatValue}, wobei RepeatingValue der Wert ist, den Sie für die Eigenschaft zur Hintergrundrepeat oder die BG-Repeat-Runde für Rundwert und BG-Repeat-Space für den Raumwert geben. In unserem Fall werden wir BG-No-Repeat verwenden.

Drittens ändern wir das Hintergrundpositionsattribut, damit das Bild immer zentriert ist. Dazu verwenden wir die Hintergrundpositionskurse von Tailwind. Das Format für diese Klassen ist Bg- {Position}, wobei die Position der Wert ist, den Sie für die Eigenschaft von Hintergrundpositionen geben. Wir werden die Klasse BG-Center hinzufügen:

<span>node -v
</span>

Jetzt können wir die Bilder vollständig sehen.

Sie werden feststellen, dass einige Bilder die Kante des Containers berühren. Um dies zu beheben, fügen wir dem Hintergrundbildelement ein Wrapper

-Element hinzu und fügen dazu ein Polster hinzu:

<span>npm -v
</span>

Beachten Sie, dass wir die Breite verschoben haben, die wir zuvor dem Hintergrundbild dem Wrapper-Element gegeben haben, und wir haben dem Hintergrundbildelement W-Full und H-Ful hinzugefügt, um sicherzustellen und Höhe.

Hinzufügen von Box Shadow und abgerundeten Ecken

Unsere Produkte sehen jetzt so viel besser aus. Wir werden dem aktuellen Stil zwei endgültige Details verleihen. Zunächst werden wir jedem Produkt einen Schatten hinzufügen. Wir werden Tailwinds Box Shadow -Klassen verwenden. Das Format für diese Klassen ist Schatten- {Größe}, wobei die Größe optional ist und von SM bis 2xl reichen kann. Es kann auch nicht sein, dass kein Kastenschatten oder inneren Schatten entfernen, um den Schatten innerlich zu machen. Zweitens machen wir die Grenze der Produktkarte ein wenig abgerundet. Wir werden den Grenzradius -Klassen von Tailwind verwenden. Das Format für diese Klassen ist abgerundet-{Position}-{Größe}, wobei die Größe optional ist und von SM bis 3xl reichen kann oder für 0 Randradius oder voll, um es vollständig abgerundet zu machen. Die Position ist auch optional und kann eine bestimmte Position wie t für oben oder L für links sein oder kann für eine bestimmte Kante wie TL für oben links spezifisch sein.

Wir fügen der Produktkarte Schatten-SM hinzu, um ihm einen kleinen Schatten hinzuzufügen, und rund-lg, um den Rand abzurunden:

npx create-react-app react-shop

Schließlich sieht unsere Produktlistenseite wie der Screenshot unten aus.

Anpassen des Themas

Bisher basiert das gesamte Styling, das wir gemacht haben, auf dem Standardstyling von Tailwind. Mit Tailwind können wir jedoch auch unser Thema anpassen. Wir können die Farben, die Schriftfamilie und mehr ändern. Alle diese Änderungen erfolgen in Tailwind.config.js.

Versuchen wir, die Farben ein wenig zu ändern. Es gibt verschiedene Möglichkeiten, die Farben des Themas zu ändern.

Eine Möglichkeit, dies zu tun, besteht darin, Ihre eigenen Farben zu definieren. Um unserem Thema beispielsweise eine neue Farbe hinzuzufügen, können wir Folgendes in Tailwind.config.js:

tun

<span>cd react-shop
</span>

Beachten Sie, dass wir in thema.extend ein Farbenobjekt hinzugefügt haben, und dann haben wir den wichtigsten Türkis mit dem Hex -Code für türkisfarbene Farbe hinzugefügt. Jetzt können wir diese Farbe genauso verwenden, wie wir die Standardfarben verwenden würden. Um beispielsweise die Hintergrundfarbe auf Türkis zu setzen, können Sie BG-Turquoise verwenden.

Eine andere Möglichkeit, die Farben des Themas anzupassen, besteht darin, die Standardfarben zu ändern. Wie bereits erwähnt, sind die Standardfarben im Rückenwind weiß, schwarz, grau, rot, blau, grün, gelb, orange, indigo, lila und rosa. Sie können den tatsächlichen Wert für diese Farben ändern.

Zum Beispiel, um das Gelb in mehr Senfgelb zu ändern, tun Sie dies:

<span>node -v
</span>

Wenn Sie jetzt die Standardklassen für Gelb verwenden, erhalten Sie die gelbe Farbe, die Sie hier definiert haben. Sie können auch den Wert für verschiedene Farbtöne mit numerischen Skalen angeben:

<span>npm -v
</span>

Sie können auch Tasten wie hellste, hell, Standard, dunkel, dunkel verwenden:

npx create-react-app react-shop

Hinzufügen einer Farbpalette

Ein dritter Weg, um die Farbe zu ändern, besteht

Ersten Sie zu Beginn von Tailwind.

Als nächstes wechseln wir rot in die Rose-Palette und grau zu Blaugrau:

<span>cd react-shop
</span>

Wenn Sie jetzt die Website überprüfen, sehen Sie eine leichte Änderung der von uns verwendeten Farben.

<span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

Wenn Sie den Unterschied in den Farben gut erkennen möchten, können Sie versuchen, Grau in Bernstein zu wechseln:

Sie werden sehen, dass der Hintergrund jetzt gelb ist.

<span>npm install @craco/craco
</span>

Sie können auch die Schriftfamilie und vieles mehr von Tailwind.config.js ändern, während Sie immer noch dieselben Klassen verwenden, die mit Tailwind -CSS versehen sind. Auf diese Weise können Sie das Thema einfach an Ihr Design anpassen.

Hinzufügen von Dark -Modus

Die dunkle Variante ermöglicht es uns, unsere Elemente für den dunklen Modus leicht zu stylen. Gleichzeitig stylen wir sie für den Lichtmodus.

Zu Beginn, als wir unsere Website eingerichtet haben, haben wir den dunklen Schlüssel in Tailwind.config.js in Medien geändert. Dies bedeutet, dass der dunkle Modus angewendet wird, wenn der Browser oder Betriebssystem auf den Dunklen Modus gesetzt ist.

Wenn Sie testen möchten, wie die Website im dunklen Modus aussieht, aber nicht auf den Dunklen Modus eingestellt ist, können Sie dies in Chrome Devtools emulieren. Öffnen Sie die Devtools, indem Sie

f12

drücken, und drücken Sie dann Strl Verschiebung p (oder cmd Verschiebung cmd Verschiebung cmd

Verschiebung

🎜>

p

<span>"scripts": {
</span>  <span>"start": "react-scripts start",
</span>  <span>"build": "react-scripts build",
</span>  <span>"test": "react-scripts test",
</span>  <span>"eject": "react-scripts eject"
</span><span>}
</span>

auf macOS) und in der Dropdown, die angezeigt wird, geben Sie "Rendering anzeigen" ein und wählen Sie die angezeigte Option. Scrollen Sie schließlich nach unten, um „CSS Media-Funktionen zu emulieren, bevor Sie die Farbschnee vorziehen“ und wählen Sie die Farbschema-Scheme: Dark. Das Gleiche kann getan werden, um den Lichtmodus zu testen, indem Sie sich für Vorrater-Farben ausschließen: Licht.

Beginnen wir zunächst die Hintergrundfarbe der Website im Dark-Modus durch Hinzufügen der Klasse Dark: BG-Gray-800 in SRC/App.js:

addieren:

Wenn Sie jetzt überprüfen und Ihr Browser/Betriebssystem auf den Dunklen Modus (oder emuliert) eingestellt ist, werden Sie feststellen, dass sich die Hintergrundfarbe in einen dunkleren Graufarbton geändert hat.

Nehmen wir nun Änderungen an der Produktkarte vor. Wir werden die Klasse Dark: BG-Grau-300 zum äußersten Element hinzufügen:

<span>node -v
</span>

Wenn Sie jetzt überprüfen, werden Sie feststellen, dass sich die Hintergrundfarbe der Produktkarte geändert hat, aber Sie werden auch feststellen, dass das Bild jetzt nicht gut aussieht, da es einen weißen Hintergrund hat.

Machen wir es besser, indem wir dem Hintergrundumschlag einen weißen Hintergrund hinzufügen, wenn er sich im dunklen Modus befindet. Dies kann durch Hinzufügen der Klasse Dark: BG-White erfolgen. Außerdem ist die Kategorie-Textfarbe jetzt kaum sichtbar, sodass wir sie in etwas Dunkleres ändern, indem wir die Klasse Dunkelheit hinzufügen: text-gray-700:

<span>npm -v
</span>

Der endgültige Erscheinungsbild unserer Website ist unten gezeigt.

Gruppen und aktivieren Sie Varianten für Plugins

Einige Varianten sind standardmäßig nicht für alle Plugins aktiviert, da dies zu einer großen Dateigröße führen würde. Wenn wir diese Varianten verwenden müssen, müssen wir sie für das gewünschte Plugin manuell in Tailwind.config.js aktivieren. Plugins hier sind die Klassen, die wir die ganze Zeit verwendet haben. Zum Beispiel gehören Hintergrundfarben zum Hintergrund -Color -Plugin.

Eine der Varianten, die nicht aktiviert sind, ist Gruppen-Überhole. Eine Gruppe ist eine Reihe von Elementen, die zusammengefasst werden, so dass jeder Staat (z. B. Schwebeplätze) die gesamte Gruppe beeinflussen kann. Eine Gruppe wird deklariert, indem die Gruppenklasse in den Container hinzugefügt wird. Anschließend können Sie die Gruppen-Hover-Variante mit einer der Versorgungsklassen eines Elements verwenden, das das Kind des Containers ist. Die Nutzklasse, für die Sie Group-Hover verwendet haben, wird nur angewendet, es sei denn

Wir werden jede Produktkarte zu einer Gruppe machen, dann werden wir uns im Bild vergrößern. Wir werden also die Gruppenklasse zum äußersten Element der Produktkomponente hinzufügen, dann werden wir dem Element mit einem Hintergrundbild in den folgenden Klassen hinzufügen:

1. Übergangstransformation: Eine der Übergangsklassen von Rückenblassen. Es wendet Übergangseigenschaften nur auf die Transformation von Änderungen an.
2. Duration-300: Eine der Übergangsdauerklassen des Rückenwinds. Es wendet eine Übergangsdauer mit Wert 300 ms an.
3. Gruppenhau: Transformation: Wie oben erläutert, stellt die Gruppenhver-Variante sicher, dass die Transformationsklasse nur angewendet wird, wenn ein Element in der Gruppe schwebt. Transformation ist eine der Transformationsklassen von Rückenwind. Es ermöglicht das Hinzufügen anderer transformierter Klassen.
4. Gruppenhau: Scale-125: Die Skala-125-Klasse ist eine der Skala-Klassen des Rückenwinds. Es setzt die Skala für X und Y auf 1,25, aber Sie müssen zuerst die Transformationsklasse hinzufügen.

Verwenden der oben genannten Klassen zoomen das Bild ein, sobald jedes Element im Produkt schwebt. Wir werden auch den Klassenüberlauf zum äußersten Element der Produktkomponente hinzufügen, um sicherzustellen, dass das Bild nicht überlauft, wenn das Bild außerhalb seines Behälters wächst. Wir werden auch Hover: Shadow-2xl verwenden, um den Schatten der Produktkarte mit dem Dauer 300 von Transition-Shadow zu vergrößern, um sicherzustellen, dass der Übergang nahtlos ist:

<span>node -v
</span>

Hinweis: Wenn Sie den Dunklen Modus emulieren (oder den Dark -Modus verwenden), können Sie den Effekt im Lichtmodus besser sehen. Wechseln Sie daher auf den Lichtmodus.

Wenn Sie jetzt versuchen, über das Produkt zu schweben, werden Sie feststellen, dass sich der Schatten vergrößert und das Bild zoomt.

Schlussfolgerung

Wir haben eine ordentliche, reaktionsschnelle Website mit React erstellt, ohne CSS schreiben zu müssen! Das ist die Magie des Rückenwind -CSS. Rückenwind CSS entfernt die mühsame, sich wiederholende Arbeit oder das Schreiben von CSS. Es erleichtert auch das Erstellen von Themen und ermöglicht es Ihnen, sich darauf zu konzentrieren, wiederverwendbare Komponenten mit einem eleganten Design zu erstellen, das perfekt für React geeignet ist. Was wir in diesem Artikel behandelt haben, ist nur die Oberfläche all der schönen Dinge, die Sie leicht mit Rückenwind -CSS erzeugen können.

FAQs bei Verwendung von React mit Rückenwind

Was ist Rückenwind -CSS und warum sollte ich es mit React verwenden?

Tailwind CSS ist ein Utility-First CSS-Framework, das eine Reihe vordefinierter Klassen für Styling-Webanwendungen bietet. Durch die Verwendung von Tailwind -CSS mit React kann der Entwicklungsprozess beschleunigt und ein konsistentes Designsystem aufrechterhalten werden.

Sie können Rückenwind -CSS in ein React -Projekt integrieren, indem Sie es mit NPM oder Garn installieren und Ihren Erstellungsprozess konfigurieren, um die CSS -Klassen von Tailwind zu verarbeiten. Rückenwind -CSS?

Ja, Sie können Tailwind -CSS mit React App erstellen. Es gibt verschiedene Methoden, einschließlich der CRACO-Konfiguration oder der React-Skripts Postcss-Setup, damit sie nahtlos funktioniert.

Wie wende ich Rückenwind -CSS -Klassen auf meine React -Komponenten an?

Sie können Rückenwind -CSS -Klassen direkt auf Ihre React -Komponenten mit ClassName -Requisiten anwenden. Zum Beispiel

Hallo, Tailwind!

. Die Verwendung von Dienstprogrammklassen kann Ihre React -Komponenten präziser machen und fördert ein konsistentes Designsystem. Es vereinfacht auch das reaktionsschnelle Design und fördert die Wiederverwendbarkeit.

Tailwind CSS bietet reaktionsschnelle Klassen, mit denen Sie verschiedene Stile für verschiedene Bildschirmgrößen definieren können. Sie können diese Klassen verwenden, indem Sie Breakpoints wie MD anhängen: zu Ihren Klassendefinitionen.

Während Rückenwind -CSS leistungsstark ist, kann es zu größeren Dateigrößen führen, wenn Sie mit der Klassenverwendung nicht vorsichtig sind. Für Designer, die es vorziehen, mit traditionellen CSS zu arbeiten, kann es auch eine Herausforderung sein.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Website mit React- und Rückenwind -CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!