Advertisement
  1. Web Design
  2. CSS

Einführung in Tailwind CSS: Ein Utility-First CSS Framework

by
Difficulty:IntermediateLength:ShortLanguages:

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

Heute werde ich Ihnen zeigen, wie Sie mit Tailwind CSS beginnen, einem hochgradig anpassbaren CSS-Framework, mit dem Sie schnell Ihre eigenen Webseiten und Komponenten erstellen können. Dazu wird eine Liste von Klassen bereitgestellt, mit denen Sie jeden visuellen Aspekt Ihrer Seite steuern können.

Video: Rückenwind CSS

In diesem Tutorial

Hier ist eine Aufschlüsselung der kommenden Aufgaben.

  • Was ist Rückenwind-CSS?
  • Ein einfaches Beispiel mit der CDN-Version
  • Erweiterte Funktionalität mit der NPM-Version
  • Anpassen von Rückenwind-CSS

Was ist Rückenwind-CSS?

Kurz gesagt, Tailwind ist ein CSS-Framework, unterscheidet sich jedoch von Bootstrap und Foundation. Es enthält nur die Grundlagen für das Gestalten Ihrer eigenen Webseiten, z. B. Ränder, Größen, Positionierungen, Farben usw. Sie werden keine Standardkomponenten wie Schaltflächen und Navigationsleisten finden - es liegt an Ihnen, Rückenwind zu verwenden, um Ihre eigenen Komponenten zu erstellen. Dies gibt immense Freiheit, wo viele moderne Frameworks nur das einschränken, was Sie erstellen. Sie müssen nichts überschreiben!

Ein einfaches Beispiel mit der CDN-Version

Um eine bessere Vorstellung davon zu bekommen, wie dies alles funktioniert, erstellen wir zunächst eine einfache Demo mit Tailwind.

Es gibt zwei Möglichkeiten, Rückenwind zu verwenden. entweder mit der CDN-Version, die für uns gehostet wird, oder über einen Manager wie NPM. Die Verwendung des CDN ist am einfachsten, schränkt uns jedoch in gewisser Weise ein:

  • Sie können das Standarddesign von Tailwind nicht anpassen
  • Sie können keine Anweisungen wie @apply, @variants usw. verwenden.
  • Sie können Funktionen wie group-hover nicht aktivieren
  • Sie können keine Plugins von Drittanbietern installieren

Wenn Sie dies nicht stört, können Sie den CDN-Link greifen und in Ihren Seitenkopf einfügen.

Nachdem dies erledigt ist, beginnen wir mit dem Hinzufügen eines Containers mit einem weiteren Div darin.

Wir fügen noch keine Klassen hinzu, können diese jedoch mit Dummy-Inhalten füllen.

Fügen wir einige Rückenwindklassen hinzu. Zum Beispiel:

  • Ein Rand auf dem Container entlang der x-Achse mit dem Wert auto. Das sieht so aus: mx-auto
  • Und wie wäre es mit einer Polsterung oben und unten? Gleiche Idee: py-4. Die 4 hier ist kein px-Wert, sondern ein Multiplikator des Basiswerts, der 2,5 rem beträgt.
  • Weiter: eine Breite, die wir wie folgt notieren: w-3/4. Auch dieser Wert muss interpretiert werden. Es bedeutet drei Viertel eines Rem, das ist .75rem.
  • Flexbox-Dienstprogramme sind ebenfalls verfügbar. Fügen Sie also einige zum verschachtelten Div in unserem Container hinzu. md: flex items-center bedeutet, dass wir auf mittleren Bildschirmen display: flex; und wir schreiben vor, dass die flexiblen Elemente zentriert sind.

Mit ein oder zwei weiteren Utility-Klassen im Mix erhalten wir Folgendes:

Schauen Sie sich das Github-Repo an, um zu visualisieren, was wir ein bisschen besser haben.

Um diese Demo noch einen Schritt weiter zu führen, schauen Sie sich die oben eingebettete Videoversion des Tutorials an. Sie lernen erweiterte Funktionen mithilfe der NPM-Version kennen und erfahren, wie Sie das von Ihnen verwendete Tailwind CSS-Framework anpassen.

Schlussfolgerung

Die Steuerung des Grundlayouts Ihres Markups mithilfe von Dienstprogrammklassen ist sehr intuitiv. Es gibt sicherlich diejenigen, die argumentieren, dass es Form nicht von Struktur trennt, aber wenn Sie feststellen, dass es Ihnen hilft, Webseiten schneller zu erstellen, ist daran sicherlich nichts auszusetzen!

Sehen Sie sich Full Tuts + Course von Jeremy McPeak an

In diesem Kurs führt Jeremy McPeak Sie in die Grundlagen von Tailwind ein und bietet Ihnen alles, was Sie benötigen, um damit Ihre Anwendungen zu gestalten.

Verwandte Links:

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.