Wenn Sie eine Anwendung von Grund auf neu programmieren, möchten Sie, dass sie Ihre einzigartige Marke widerspiegelt, auf jedem Gerät reagiert und einfach zu schreiben und zu warten ist – und das sind wahrscheinlich nur einige Punkte auf Ihrer Wunschliste.
Durch das Erstellen mit Tailwind CSS können Sie diese Punkte von Ihrer Liste streichen. Tailwind CSS ist ein CSS- Framework zum schnellen Erstellen und Anpassen von Anwendungen, ohne eigenes CSS schreiben zu müssen .
Um zu verstehen, warum über 200.000 aktive Websites im Internet Tailwind CSS verwenden , gehen wir auf Folgendes ein:
Was ist Tailwind CSS?
Tailwind CSS ist ein Utility-First-CSS-Framework, das Benutzern das schnellere und einfachere Erstellen von Anwendungen ermöglicht. Sie können Utility-Klassen verwenden, um Layout, Farbe, Abstand, Typografie, Schatten und mehr zu steuern und so ein vollständig benutzerdefiniertes Komponentendesign zu erstellen – ohne Ihr HTML zu verlassen oder eine einzige Zeile benutzerdefiniertes CSS zu schreiben.
Angenommen, Sie möchten eine Schaltfläche mit fester Höhe, horizontaler Polsterung, schwarzer Hintergrundfarbe, abgerundeten Kanten und weißer, halbfetter Schriftart erstellen. Hier ist das HTML, das Sie verwenden würden:
Das HTML enthält sechs Hilfsklassen. Im Folgenden werden sie im Einzelnen erläutert:
- h-10 : Diese Klasse stellt die Schaltfläche auf eine feste Höhe von 10 Einheiten ein.
- px-6 : Diese Klasse stellt die horizontale Polsterung der Schaltfläche auf 6 Einheiten ein.
- font-semibold : Diese Klasse stellt die Schriftstärke der Schaltfläche auf halbfett ein.
- rounded-md : Diese Klasse legt den Rahmenradius der Schaltfläche fest, sodass sie abgerundete Ecken hat.
- bg-black : Diese Klasse setzt die Hintergrundfarbe der Schaltfläche auf Schwarz.
- text-white : Diese Klasse setzt die Textfarbe der Schaltfläche auf Weiß.
Wie Sie vielleicht schon vermutet haben, besteht die Lernkurve bei der Verwendung von Tailwind CSS in erster Linie darin, sich mit den Hilfsklassen vertraut zu machen. Aber sobald Sie das getan haben, können Sie schnell und konsistent benutzerdefinierte Komponenten wie die folgende Schaltfläche erstellen.
Nachdem wir nun das Tailwind CSS-Framework besser verstehen, schauen wir uns einige der Vorteile seiner Verwendung an.
Vorteile von Tailwind CSS
Die Verwendung eines CSS-Frameworks wie Tailwind bietet viele Vorteile. Im Folgenden sind die wichtigsten aufgeführt.
- Sie schreiben weniger benutzerdefiniertes CSS . Mit Tailwind gestalten Sie Elemente, indem Sie bereits vorhandene Klassen direkt in Ihrem HTML anwenden . Indem Sie auf diese Weise Hilfsklassen verwenden, können Sie benutzerdefinierte Designs erstellen, ohne CSS schreiben zu müssen.
- Sie halten CSS-Dateien klein. Ohne ein Framework wie Tailwind müssen Sie weiterhin CSS schreiben, während Sie neue Funktionen und Komponenten hinzufügen. Dadurch werden Ihre CSS-Dateien immer größer und schwerer. Durch die Verwendung von Dienstprogrammen wie den Flexbox- und Padding-Dienstprogrammen von Tailwind sind die meisten Stile wiederverwendbar, sodass Sie selten neues CSS schreiben müssen.
- Sie müssen keine Klassennamen erfinden . Bei Tailwind wählen Sie Klassen aus einem vordefinierten Designsystem . Das heißt, Sie müssen sich nicht den Kopf darüber zerbrechen, die „perfekten“ Klassennamen für bestimmte Stile und Komponenten auszuwählen, oder sich komplizierte Namen wie „sidebar-inner-wrapper“ merken.
- Sie können sicherere Änderungen vornehmen. Wenn Sie beim herkömmlichen Ansatz Änderungen an CSS vornehmen, können Sie auf Ihrer gesamten Site etwas beschädigen. Im Gegensatz zu CSS sind Hilfsklassen in Ihrem HTML lokal. Das heißt, Sie können sie ändern, ohne sich Sorgen machen zu müssen, dass etwas anderes auf Ihrer Site beschädigt wird.
Warum Tailwind CSS?
Jetzt fragen Sie sich vielleicht, warum Sie Tailwind anderen CSS-Frameworks vorziehen sollten? Tailwind CSS ist ein Low-Level-Framework. Das bedeutet, dass Tailwind im Gegensatz zu anderen CSS-Frameworks wie Bootstrap und Materialize keine vollständig gestalteten Komponenten wie Schaltflächen, Dropdown-Menüs und Navigationsleisten bietet. Stattdessen bietet es Hilfsklassen, sodass Sie Ihre eigenen wiederverwendbaren Komponenten erstellen können.
Aus diesem Grund bietet es viel mehr Flexibilität und Kontrolle über das Erscheinungsbild Ihrer Anwendung als andere CSS-Frameworks. So können Sie eine einzigartigere Site erstellen.
Um mehr darüber zu erfahren, was Tailwind CSS ist, welche Vorteile es bietet und warum Sie es verwenden sollten, schauen Sie sich dieses Video an:
Tailwind CSS-Beispiele
Tailwind bietet UI-Komponenten und Vorlagen bzw. „Beispiele“, damit Sie schnell mit der Erstellung Ihrer Anwendung beginnen können.
Es gibt ein von Tailwind erstelltes Repository , das Beispiele für Landingpage-Heroes, Feature-Abschnitte, Newsletter-Anmeldeformulare, Tabellen, modale Fenster, Checkout-Formulare, Einkaufswagen und mehr enthält. Sie können den Code für die meisten oder alle dieser Beispiele gegen eine einmalige Paketgebühr erhalten.
Das andere Repository wurde von Community-Mitgliedern erstellt und ist Open Source. Wir werden uns im Folgenden auf Beispiele aus diesem Repository konzentrieren.
Tailwind CSS-Formular
Um Benutzern das Abonnieren Ihres Newsletters zu ermöglichen, können Sie mit Tailwind ein Opt-in-Formular für E-Mail-Nachrichten erstellen .
Um ein einfaches E-Mail-Anmeldeformular wie das oben gezeigte zu erstellen, können Sie den folgenden Code verwenden:
Um den Rahmen, die Hintergrundfarbe, die Textfarbe und andere Aspekte dieses Formulars anzupassen, können Sie unter anderem die Hilfsklassen border-{style}, bg-{color} und text-{color} ändern.
Profi-Tipp: Fügen Sie den Hilfsklassen border-{color}, bg-{color} und text-{color} eine Zahl hinzu, um einen Farbton der Standardfarbpalette von Tailwind zu verwenden .
Tailwind CSS-Suchleiste
Damit Benutzer Ihre Anwendung anhand eines Schlüsselworts durchsuchen können, können Sie mit Tailwind eine Suchleiste erstellen.
Um eine Suchleiste mit einem Symbol und einer Schaltfläche „Senden“ wie oben gezeigt zu erstellen, können Sie den folgenden Code verwenden:
Profi-Tipp: Verwenden Sie die Dienstprogrammklasse w-full, um die Breite des Suchfelds auf 100 % einzustellen.
Tailwind CSS-Schieberegler
Um durch mehrere Elemente und Bilder zu gleiten, können Sie mit Tailwind eine Schieberegler- oder Karussellkomponente erstellen.
Um einen Slider wie den oben gezeigten zu erstellen, können Sie das folgende HTML verwenden:
Hinweis: Diese Komponente wurde ohne JS-Bibliothek erstellt, Sie benötigen jedoch das folgende JavaScript, um den Schieberegler auszulösen.
Profi-Tipp: Fügen Sie der übergeordneten Div die Hilfsklasse „Flex-Nowrap“ hinzu, um ein Umbrechen zu verhindern, und fügen Sie den untergeordneten Divs (den Folien) die Hilfsklasse „Flex-None“ hinzu, um ein Vergrößern oder Verkleinern zu verhindern.
Tailwind CSS-Preistabelle
Um Kunden mehrere Premiumpläne mit unterschiedlichen Funktionen und Preisen anzuzeigen, können Sie mit Tailwind CSS eine Preistabelle erstellen.
Um den Abschnitt „Intro“ der Preistabelle wie oben gezeigt zu erstellen, können Sie den folgenden Code verwenden:
Hinweis: Dieser Code erstellt nur den ersten Container für den Plan „Intro“. Um die Container für die Pläne „Base“, „Popular“ und „Enterprise“ zu erstellen, müssen Sie diesen Code replizieren und den Text für jeden Plannamen und Preis austauschen.
Mehr lesen: So werden Sie im Jahr 2024 zum content creator: Schritte, Tipps und Branchenwahrheiten
Profi-Tipp: Fügen Sie vor einem Klassennamen wie „bg-gray-200“ den Modifikator „hover:“ hinzu, um diese Hilfsklasse bedingt anzuwenden (d. h. sodass der Container die Hintergrundfarbe nur ändert, wenn der Benutzer mit der Maus darüber fährt).
Weitere Beispiele, beispielsweise zum Erstellen einer Seitenleiste mit Tailwind CSS, finden Sie in diesem Video:
Verwenden von Tailwind CSS zum Beschleunigen Ihrer Codierung
Tailwind CSS beschleunigt das Schreiben und Verwalten des Codes Ihrer Anwendung. Durch die Verwendung dieses Utility-First-Frameworks müssen Sie kein benutzerdefiniertes CSS schreiben, um Ihre Anwendung zu gestalten. Stattdessen können Sie Utility-Klassen verwenden, um die Polsterung, den Rand, die Farbe, die Schriftart, den Schatten und mehr Ihrer Anwendung zu steuern.
Möglicherweise ist eine gewisse Lernkurve erforderlich, bis Sie sich mit diesen Dienstprogrammklassen vertraut gemacht haben. Danach können Sie jedoch schneller als je zuvor Anwendungen erstellen und verwalten.