So verwenden Sie Tailwind CSS, um schnell schicke Websites zu entwickeln

Je weiter Sie als Entwickler vorankommen, desto wahrscheinlicher werden Sie Technologien verwenden, die Ihnen helfen, mehr zu erreichen, indem Sie weniger Code schreiben. Ein solides Frontend-Framework wie Tailwind CSS ist eine Möglichkeit, dies zu erreichen.

In diesem Artikel lernen wir Tailwind CSS kennen – ein CSS-Framework, das beim Erstellen und Entwerfen von Webseiten hilft. Wir erklären zunächst, wie Sie Tailwind CSS installieren und in Ihr Projekt integrieren, einige praktische Anwendungen sehen und auch, wie Sie Ihre benutzerdefinierten Stile und Plugins erstellen können.

Erregt? Lass uns anfangen!

Was ist Tailwind CSS?

Tailwind CSS ist ein Utility-First-CSS-Framework (Cascading Style Sheets) mit vordefinierten Klassen, mit denen Sie Webseiten direkt in Ihrem Markup erstellen und gestalten können. Damit können Sie CSS in Form von vordefinierten Klassen in Ihren HTML-Code schreiben.

Wir werden definieren, was ein Framework ist und was wir mit „Utility-First-CSS“ meinen, damit Sie besser verstehen, worum es bei Tailwind CSS geht.

Was ist ein Rahmen?

Als allgemeiner Programmierbegriff ist ein Framework ein Werkzeug, das wiederverwendbare und vorgefertigte Komponenten bereitstellt, die aus den Funktionen eines bereits vorhandenen Werkzeugs aufgebaut sind. Der allgemeine Zweck der Erstellung von Frameworks besteht darin, die Entwicklungsgeschwindigkeit durch weniger Arbeit zu erhöhen.

Nachdem wir nun die Bedeutung eines Frameworks festgelegt haben, sollte es Ihnen helfen zu verstehen, dass Tailwind CSS ein Tool ist, das auf CSS-Funktionen aufbaut. Alle Funktionalitäten des Frameworks wurden von CSS-Stilen abgeleitet, die als Klassen zusammengestellt wurden.

Was ist ein Utility-First-CSS-Framework?

Wenn wir Utility-First-CSS sagen, beziehen wir uns auf Klassen in unserem Markup (HTML) mit vordefinierten Funktionalitäten. Das bedeutet, dass Sie nur eine Klasse mit vordefinierten Stilen schreiben müssen, und diese Stile werden auf das Element angewendet.

In einem Fall, in dem Sie mit Vanilla-CSS (CSS ohne Framework oder Bibliothek) arbeiten, würden Sie Ihrem Element zuerst einen Klassennamen geben und dieser Klasse dann verschiedene Eigenschaften und Werte zuweisen, die wiederum das Styling auf Ihr Element anwenden .

Wir zeigen Ihnen ein Beispiel. Hier erstellen wir eine Schaltfläche mit abgerundeten Ecken und einem Text mit der Aufschrift „Click me“. So sieht die Schaltfläche aus:

Wir werden dies zuerst mit Vanilla-CSS und dann mit Hilfsklassen tun, die in Tailwind CSS verfügbar sind.

Mit Vanilla CSS

 <button class="btn">Click me</button>

Wir haben Schaltflächen-Tags die Klasse btn , die mit einem externen Stylesheet gestylt wird. Das ist:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Mit Tailwind-CSS

 <button class="bg-black p-2 rounded">Click me</button>

Dies alles ist erforderlich, um den gleichen Effekt wie im Beispiel mit Vanilla CSS zu erzielen. Es wurde kein externes Stylesheet erstellt, in das Sie die Stile schreiben müssen, da jeder von uns verwendete Klassenname bereits einen vordefinierten Stil hat.

Voraussetzungen für die Verwendung von Tailwind CSS

Bevor Sie Tailwind CSS verwenden, sollten Sie einige Voraussetzungen erfüllen, um die Funktionen des Frameworks problemlos nutzen zu können. Hier sind einige davon:

• Gute Kenntnisse von HTML, seiner Struktur und Funktionsweise
• Solides Fundament in CSS – Medienabfragen, Flexbox und Grid-System

Wo kann Tailwind CSS verwendet werden?

Sie können Tailwind CSS in Frontend-Webprojekten verwenden, einschließlich JavaScript-Frameworks wie React.js, Next.js, Laravel, Vite, Gatsby usw.

Vor- und Nachteile von Tailwind CSS

Hier sind einige der Vorteile der Verwendung von Tailwind CSS:

1. Schnellerer Entwicklungsprozess
2. Hilft Ihnen, Ihr CSS besser zu üben, da die Dienstprogramme ähnlich sind
3. Alle Dienstprogramme und Komponenten sind leicht anpassbar
4. Die Gesamtdateigröße für die Produktion ist normalerweise gering
5. Leicht zu erlernen, wenn Sie bereits CSS kennen
6. Gute Dokumentation zum Lernen

Zu den Nachteilen der Verwendung von Tailwind CSS gehören:

1. Ihr Markup sieht bei großen Projekten möglicherweise unorganisiert aus, da sich alle Stile in den HTML-Dateien befinden.
2. Es ist nicht leicht zu lernen, wenn Sie CSS nicht gut verstehen.
3. Sie sind gezwungen, alles von Grund auf neu zu erstellen, einschließlich Ihrer Eingabeelemente. Wenn Sie Tailwind CSS installieren, werden alle CSS-Standardstile entfernt.
4. Tailwind CSS ist nicht die beste Option, wenn Sie den Zeitaufwand für die Entwicklung des Frontends Ihrer Website minimieren und sich hauptsächlich auf die Backend-Logik konzentrieren möchten.

Wann man Tailwind CSS verwenden sollte

Tailwind CSS wird am besten verwendet, um den Entwicklungsprozess zu beschleunigen, indem weniger Code geschrieben wird. Es wird mit einem Designsystem geliefert, das dabei hilft, die Konsistenz über verschiedene Designanforderungen wie Polsterung, Abstände usw. hinweg aufrechtzuerhalten. Damit müssen Sie sich keine Gedanken über die Erstellung Ihrer Designsysteme machen.

Sie können Tailwind CSS auch verwenden, wenn Sie ein Framework verwenden möchten, das leicht konfigurierbar ist, da es Sie nicht dazu zwingt, Komponenten (Navigationsleisten, Schaltflächen, Formulare usw.) immer auf die gleiche Weise zu verwenden. Sie können wählen, wie Ihre Komponenten aussehen sollen. Aber Sie sollten Tailwind niemals verwenden, wenn Sie CSS nicht gelernt und geübt haben.

Ähnlichkeiten und Unterschiede zwischen Tailwind CSS und anderen CSS-Frameworks

Hier sind ein paar Gemeinsamkeiten:

1. Sie helfen Ihnen, Ihre Arbeit schneller zu erledigen.
2. Sie kommen mit vordefinierten Klassen.
3. Sie wurden auf CSS-Regeln aufgebaut.
4. Sie sind beide leicht zu erlernen und mit Grundkenntnissen in CSS zu verwenden.

Schauen wir uns nun einige der Unterschiede an:

1. Tailwind unterscheidet sich von den meisten Frameworks, da Sie Ihre Komponenten erstellen müssen. Zum Beispiel hat Bootstrap Komponenten wie Navigationsleisten, Schaltflächen und so weiter, aber mit Tailwind müssen Sie das alles selbst bauen.
2. Einige Frameworks wie Bootstrap sind nicht einfach anpassbar, sodass Sie gezwungen sind, ihre Designmuster zu verwenden. In Tailwind steuerst du den Fluss von allem.
3. Für die Verwendung von Tailwind sind fundierte CSS-Kenntnisse erforderlich. Das Schreiben von Klassennamen reicht nicht aus, da Sie sie kombinieren müssen, als ob Sie Vanilla-CSS schreiben würden, um dasselbe Ergebnis zu erzielen. Alles, was Sie in den meisten anderen Frameworks wissen müssen, ist, welche Komponente aufgebaut wird, wenn Sie einen Klassennamen verwenden.

Erste Schritte mit der Verwendung von Tailwind CSS

Bevor Sie Tailwind CSS installieren und in Ihr Projekt integrieren, stellen Sie Folgendes sicher:

1. Sie haben Node.js auf Ihrem Computer installiert, um den Node-Paketmanager (npm) im Terminal zu verwenden.
2. Ihr Projekt ist mit Ihren erstellten Dateien eingerichtet.

So sieht unsere Projektstruktur im Moment aus:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Starten Sie als Nächstes ein Terminal für Ihr Projekt und führen Sie die folgenden Befehle aus:

 npm install -D tailwindcss

Der obige Befehl installiert das Tailwind CSS-Framework als Abhängigkeit. Generieren Sie als Nächstes Ihre tailwind.config.js-Datei, indem Sie den folgenden Befehl ausführen:

 npm install -D tailwindcss

Die Datei tailwind.config.js ist beim Erstellen leer, daher müssen wir einige Codezeilen hinzufügen:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Die im Inhaltsarray bereitgestellten Dateipfade ermöglichen es Tailwind, alle nicht verwendeten Stile während der Erstellungszeit zu löschen/entfernen.

Als Nächstes fügen Sie Ihrer CSS-Datei im src -Ordner die „@tailwind“-Anweisungen hinzu – hier generiert Tailwind alle seine vordefinierten Utility-Stile für Sie:

 @tailwind base; @tailwind components; @tailwind utilities;

Als letztes müssen Sie den Build-Prozess starten, indem Sie diesen Befehl in Ihrem Terminal ausführen:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

Im obigen Code teilen wir Tailwind mit, dass unsere Eingabedatei das Stylesheet im src-Ordner ist und dass alle verwendeten Stile in die Ausgabedatei im öffentlichen Ordner eingebaut werden müssen. --watch ermöglicht es Tailwind, Ihre Datei auf Änderungen für einen automatischen Build-Prozess zu überwachen; Wenn wir es weglassen, müssen wir dieses Skript jedes Mal ausführen, wenn wir unseren Code erstellen und die gewünschte Ausgabe sehen möchten.

Verwenden von Tailwind-CSS

Nachdem wir nun Tailwind CSS für unser Projekt installiert und eingerichtet haben, sehen wir uns einige Beispiele an, um seine Anwendung vollständig zu verstehen.

Flexbox-Beispiel

Um Flex in Tailwind CSS zu verwenden, müssen Sie eine Flex-Klasse und dann die Richtung der Flex-Elemente hinzufügen:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Die Verwendung von flex-row-reverse kehrt die Reihenfolge um, in der die Schaltflächen angezeigt werden.

flex-col stapelt sie übereinander. Hier ist ein Beispiel:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Genau wie im vorherigen Beispiel kehrt flex-col-reverse die Reihenfolge um.

Grid-Beispiel

Bei der Angabe von Spalten und Zeilen im Rastersystem gehen wir anders vor, indem wir eine Zahl übergeben, die bestimmt, wie die Elemente den verfügbaren Platz einnehmen:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

Farben

Tailwind kommt mit vielen vordefinierten Farben. Jede Farbe hat eine Reihe verschiedener Variationen, wobei die hellste Variation 50 und die dunkelste 900 ist.

Hier ist ein Bild mit mehreren Farben und ihren HTML-Hex-Codes, um dies zu veranschaulichen

Wir geben ein Beispiel dafür, wie Sie dies tun können, indem Sie die rote Farbe oben verwenden, um einem Schaltflächenelement eine Hintergrundfarbe zu geben:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Diese Syntax ist für alle Farben in Tailwind gleich, mit Ausnahme von Schwarz und Weiß, die auf die gleiche Weise geschrieben werden, jedoch ohne die Verwendung von Zahlen: bg-black und bg-white .

Um Textfarbe hinzuzufügen, verwenden Sie die Klasse text-{color} :

 <p class="text-yellow-600">Hello World</p>

Polsterung

Tailwind verfügt bereits über ein Designsystem, das Ihnen helfen würde, eine konsistente Skalierung Ihrer Designs beizubehalten. Alles, was Sie wissen müssen, ist die Syntax zum Anwenden jedes Dienstprogramms.

Im Folgenden finden Sie Dienstprogramme zum Hinzufügen von Padding zu Ihren Elementen:

• p bezeichnet Padding über das gesamte Element.
• py bezeichnet padding padding-top und padding-bottom.
• px steht für padding-left und padding-right.
• pt bezeichnet padding-top.
• pr bezeichnet padding-right.
• pb bezeichnet Polsterboden.
• pl bezeichnet padding-left

Um sie auf Ihre Elemente anzuwenden, müssten Sie die entsprechenden Zahlen verwenden, die von Tailwind bereitgestellt werden – ein bisschen ähnlich den Zahlen, die Farbvarianten im letzten Abschnitt darstellten. Hier ist, was wir meinen:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Gewinnspanne

Die vordefinierten Dienstprogramme für Padding und Margin sind sehr ähnlich. Du musst das p durch ein m ersetzen:

• m
• my
• mx
• mt
• mr
• mb
• ml

So erstellen Sie ein Tailwind-CSS-Plugin

Auch wenn Tailwind CSS bereits viele Dienstprogramme und Designsysteme für Sie erstellt hat, ist es dennoch möglich, dass Sie eine bestimmte Funktionalität hinzufügen möchten, um die Einsatzmöglichkeiten von Tailwind zu erweitern. Tailwind CSS ermöglicht uns dies durch die Erstellung eines Plugins.

Lassen Sie uns unsere Hände schmutzig machen, indem wir ein Plugin erstellen, das die Aquafarbe und ein Rotationsdienstprogramm hinzufügt, das ein Element um 150 auf der X-Achse dreht. Wir erstellen diese Dienstprogramme in der Datei tailwind.config.js mit ein wenig JavaScript.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Lassen Sie uns das jetzt aufschlüsseln. Als erstes haben wir die Plugin-Funktion von Tailwind importiert:

 const plugin = require("tailwindcss/plugin");

Dann haben wir unsere Plugins im Plugins-Array erstellt:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Möglicherweise müssen Sie das Build-Skript erneut ausführen, nachdem Sie Ihr Plugin erstellt haben.

Jetzt, da die Plugins fertig sind, können wir sie testen:

 <button class="bg-aqua rotate-150deg">Click me</button>

Wenn Sie alles richtig gemacht haben, sollten Sie eine aquafarbene Schaltfläche haben, deren Text um 150 auf der X-Achse gedreht ist.

Zusammenfassung

Frameworks sind eine unschätzbare Option, wenn es darum geht, Ihren Workflow zu beschleunigen. Sie helfen Ihnen, gut aussehende und professionelle Webseiten zu erstellen und gleichzeitig ein konsistentes Design zu gewährleisten. Tailwind CSS bietet viele Utility-Forward-CSS-Klassen, mit denen Sie Ihr Webdesign und Ihre Webentwicklung auf die nächste Stufe bringen können.

In diesem Artikel haben wir gelernt, was Tailwind CSS ist und was es zu einem Framework macht. Wir haben uns dann den Installationsprozess angesehen und einige Beispiele gesehen, die zeigten, wie wir unsere benutzerdefinierten Plugins erstellen können, um die vorhandene Funktionalität zu erweitern.

Wenn Sie bis zu diesem Punkt weiterverfolgt haben, haben Sie jetzt ein grundlegendes, aber solides Verständnis dafür, wie Tailwind funktioniert. Um ein solches Utility-First-Framework besser zu nutzen, müssen Sie jedoch weiter üben und Ihre CSS-Kenntnisse erweitern, wenn Sie nicht bereits über eine solide Grundlage verfügen.

Haben Sie in der Vergangenheit Tailwind CSS oder ein anderes CSS-Framework verwendet? Teilen Sie Ihre Gedanken im Kommentarbereich mit!