Tailwind CSS ist ein Utility-First CSS-Framework zum schneller Erstellen benutzerdefinierter Benutzeroberflächen. IL ermöglicht es Ihnen, Ihren Stil zu schreiben, ohne Ihre HTML zu verlassen.
Der größte Nachteil von Rückenwind -CSS ist das Risiko, zu lange Klassen zu haben, die unseren Code nicht lesbar genug machen.
Da React auf Komponentenbasis basiert, können wir die Komponentenlogik mit seinen Klassen extrahieren und an anderer Stelle wiederverwenden, was zu mehr lesbaren Code mit mehr Komponenten und weniger Klassen führt.
Aus diesem Grund habe ich diese Sammlung von UI -Komponenten vollständig anpassbar erstellt. Kopieren Sie einfach eine Komponente, die Sie verwenden möchten
Alle Komponenten befinden sich im Verzeichnis für Pakete .
Jede Komponente enthält 2 Unterverzeichnisse
Beispiele : Enthält Beispiele für jede Variante der Komponente in TypeScript
Snippets : Enthält Beispiele für jede Variante der Komponente in einfachem Reagieren
So fügen Sie eine neue Komponente hinzu:
Erstellen Sie Ihr neues Verzeichnis in SRC/Paketen/{yourComponentName} In Ihrem Ordner erstellen Sie 2 Unterordner und eine Datei
Erstellen Sie Ihre neue Datei (Route) in SRC/Seiten/Komponenten/{Ihren Komponentennamen} . Dann importieren Sie alle Beispiele und Snippets für Ihre Komponente
Diese Komponenten sind mit allen Browsern kompatibel
| Chrom | Firefox | Rand | Safari | Oper |
|---|---|---|---|---|
![]() |
Wenn Sie zum Projekt beitragen möchten, Fehler beheben, die Zugänglichkeit verbessern oder ein Problem eröffnen möchten, befolgen Sie bitte unseren Beitragsanleitung
Führen Sie zunächst den Entwicklungsserver aus:
npm run dev
# or
yarn devÖffnen Sie http: // localhost: 3000 mit Ihrem Browser, um das Ergebnis zu sehen.