So stylen Sie ein Formular mit Tailwind CSS

Wenn Sie sich mit den neuesten CSS-Frameworks auf dem Laufenden gehalten haben, haben Sie wahrscheinlich schon vom neuesten Kind auf dem Block gehört: Tailwind CSS. Laut seiner Dokumentation ist „Tailwind ein Utility-First CSS-Framework für die schnelle Erstellung benutzerdefinierter Benutzeroberflächen.“

In der Praxis bedeutet dies die Verwendung einer Vielzahl von Klassen, die eng mit den zugrunde liegenden CSS-Eigenschaften übereinstimmen. Beispielsweise bedeutet die Anwendung einer Klasse wie .text-center auf ein Element, dass wir seine text-align-Eigenschaft auf center setzen. Einfach genug, oder?

Die Verwendung von Utility-Klassen wie dieser ermöglicht es uns, mehr Zeit mit der Iteration von Designs zu verbringen und eine vorzeitige Abstraktion unseres CSS zu vermeiden. Sobald wir mit unseren Designs zufrieden sind, macht es Tailwind einfach, unsere Utilities in Komponentenklassen zu extrahieren.

Nun, ich bin sicher, Sie wissen, dass selbst die Erwähnung eines Utility-Frameworks eine offene Einladung für eine gewisse Aufregung ist. Bevor wir anfangen, mich auf Twitter oder in den Kommentaren zu beschimpfen, weil ich überhaupt ein Utility-Framework erwähnt habe, erinnern wir uns einen Moment daran, dass Tailwind nur ein *mögliches* Werkzeug ist, das wir verwenden können.

Wenn Sie es nicht Ihrem Werkzeugkasten hinzufügen möchten, dann keine Sorge – machen Sie Ihr Ding! Aber wenn Sie daran interessiert sind, dieses neue Werkzeug zumindest zu verstehen, schauen wir uns an, wie wir gemeinsam ein Anmeldeformular erstellen.

Ohne weitere Umschweife richten wir ein neues Projekt mit Tailwind ein, codieren etwas HTML und stylen es.

Die Einrichtung

Beginnen wir mit der Erstellung eines Verzeichnisses, in dem wir arbeiten können. Navigieren Sie mit Ihrem Terminal zu dem Verzeichnis, in dem Sie Ihr Projekt erstellen möchten, und führen Sie mkdir <Ihr-Projektname> aus. Wechseln wir nun mit cd in unser neues Projekt und folgen Sie der Tailwind Installationsanleitung.

Da wir alles sehen möchten, was Tailwind leisten kann, installieren wir es mit npm oder Yarn unter Verwendung der folgenden Methode.

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

Nach der Installation von Tailwind können wir nun die Konfigurationsdatei generieren, indem wir ./node_modules/.bin/tailwind init ausführen. Dadurch wird eine tailwind.js-Datei in der Stammdatei unseres Projekts generiert. In dieser Datei können wir die Standardeinstellungen von Tailwind an die Bedürfnisse unseres Projekts anpassen. Für dieses Projekt müssen wir nichts ändern.

Nun erstellen wir eine CSS-Datei, in der wir unser eigenes CSS verwalten und die Tailwind-Stile einfügen können. Dazu können wir von unserem Projektverzeichnis aus touch styles.css ausführen.

In dieser neuen Datei können wir die @tailwind-Direktive von Tailwind verwenden, um die Stile preflight und utilities in unser CSS einzufügen. preflight enthält alle Basisstile und einige Browserstil-Normalisierungen, während utilities alle Utility-Klassen hinzufügt, die wir in unserer Konfigurationsdatei angegeben haben. Unsere styles.css-Datei sollte also ungefähr so aussehen

@tailwind preflight;

/* Here we can add any custom overrides */

@tailwind utilities;

/* Here we can add our own utilities or custom CSS */

Wenn Sie PHPStorm verwenden und sich über die roten Wellenlinien in Ihrer CSS-Datei für @tailwind ärgern, fügen Sie einfach /*noinspection CssInvalidAtRule*/ über der Stelle ein, an der Sie sie verwenden.

Damit ist alles eingerichtet, und wir können ./node_modules/.bin/tailwind build styles.css -o main.css ausführen, um die CSS-Datei zu generieren, die wir in unserem Projekt verwenden möchten. Das mag etwas mühsam erscheinen, aber keine Sorge! Tailwind funktioniert mit gängigen Build-Tools wie Webpack, Gulp oder Laravel Mix, sodass Sie in einem größeren Projekt einfach alles einstellen und vergessen können.

Das erledigt unsere Tailwind-Einrichtung! Nun können wir mit dem Codieren unseres HTML beginnen.

Unser HTML

Bevor wir unser Anmeldeformular stylen können, müssen wir es erstellen! Zuerst benötigen wir eine einfache index.html-Datei. Sie können also von Ihrem Stammverzeichnis aus touch index.html ausführen, um die Datei zu erstellen. Dann können wir den folgenden Snippet hinzufügen, um zu beginnen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tailwind Intro</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>

</body>
</html>

Wie Sie sehen, ist es Ihre typische HTML-Seite. Das Einzige, was hier besonders ist, ist, dass wir unsere main.css-Datei importieren und unserer Seite einen aussagekräftigen Titel geben. Nun wollen wir unser Anmeldeformular erstellen!

Zuerst fügen wir zwei verschachtelte <div>-Elemente innerhalb unseres <body>-Tags hinzu.

<body>
  <div>
    <div>
          
    </div>
  </div>
</body>

Wir verwenden das äußere <div> für die Positionierung unserer Seite, während das innere <div> der Wrapper für unser Formular sein wird. Nun fügen wir innerhalb des inneren <div> eine <h1>-Überschrift hinzu, um das Formular zu beschriften, und ein <form>-Element.

<div>
  <h1>Sign Up</h1>
  <form action="/" method="post">
              
  </form>
</div>

Jetzt geht es richtig zur Sache! Um das Formular zu vervollständigen, müssen wir nur noch die <label>-Elemente, <input>-Elemente und <button> hinzufügen. Während wir sie hinzufügen, fassen wir jedes unserer <label>-<input>-Paare in ein <div>, damit sie zusammenbleiben.

<form action="/" method="post">
  <div>
    <label for="first_name">First Name</label>
    <input type="text" name="first_name" id="first_name">
  </div>
  <div>
    <label for="last_name">Last Name</label>
    <input type="text" name="last_name" id="last_name">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email">
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password">
  </div>
  <button type="submit">Create Account</button>
</form>

Zum Schluss fügen wir direkt unter unserem Formular einen Link zum Anmeldeformular hinzu.

<div>
  <!-- Form is here -->
  <a href="/login">Already have an account?</a>
</div>

Wenn wir das alles zusammenfügen, sieht unser HTML so aus

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tailwind Intro</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div>
    <div>
      <h1>Sign Up</h1>
      <form action="/" method="post">
        <div>
          <label for="first_name">First Name</label>
          <input type="text" name="first_name" id="first_name">
        </div>
        <div><label for="last_name">Last Name</label>
          <input type="text" name="last_name" id="last_name">
        </div>
        <div>
          <label for="email">Email</label>
          <input type="email" name="email" id="email">
        </div>
        <div>
          <label for="password">Password</label>
          <input type="password" name="password" id="password">
        </div>
        <button type="submit">Create Account</button>
      </form>
      <a href="/login">Already have an account?</a>
    </div>
  </div>
</body>
</html>

Ziemlich einfach, oder? Wenn wir uns nun ansehen, wie das auf der Seite gerendert wird, sollten wir etwas sehen, das so aussieht

Seien Sie nicht beunruhigt, wenn es so aussieht, als ob die <input>s fehlen; das sind nur die Browser-Resets am Werk. Endlich sind wir bereit zu sehen, worum es bei diesem Tailwind CSS geht.

Tailwind CSS verwenden

Als gute Entwickler, die wir sind, verfolgen wir einen mobile-first Ansatz für das Styling unseres Anmeldeformulars. Bei einer kleineren Ansichtsbreite von 400px sieht unsere Seite also so aus

Stylen unserer Formularfelder

Beginnen wir mit der Verwendung von Tailwind, indem wir unsere <input>s stylen. Zuerst fügen wir einen Rahmen hinzu, damit wir ihn auf der Seite sehen können. Dazu müssen wir nur die Klasse .border hinzufügen. Unser erster Namens-<input> sieht also jetzt so aus

<input class="border" type="text" name="first_name" id="first_name">

Jetzt können wir es auf dem Bildschirm sehen!

Wie einfach war das? Machen wir weiter, indem wir etwas Polsterung hinzufügen und die Textfarbe etwas aufhellen. Dazu müssen wir nur die folgenden Klassen hinzufügen: .py-2, .px-3 und .text-grey-darkest.

<input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">

Mit den ersten beiden Klassen nutzen wir die Polsterungsskala, die mit Tailwind geliefert wird, und wenden sie vertikal und horizontal auf das Element an. Wenn Sie Ihre eigene Skala definieren möchten, springen Sie einfach in Ihre Konfigurationsdatei und ändern Sie sie nach Ihren Bedürfnissen. Mit der letzten Klasse verwenden wir die Standardfarbpalette von Tailwind und ändern die Farbe unseres Elements in das dunkelste Grau.

Lassen Sie uns unser Formular einen Schritt weiter bringen. Nun können wir unsere <label>s über unseren <input>s positionieren und ihnen etwas Styling verpassen.

<div class="flex flex-col mb-4">
  <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
  <input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
</div>

Schauen Sie sich das an, unser Feld für den Vornamen sieht großartig aus! Und das Beste ist, dass ich Ihnen wirklich nicht erklären muss, was diese Klassen tun – sie erklären sich selbst! Aber nur damit wir alle auf dem gleichen Stand sind, lasse ich sie kurz durchlaufen.

Das äußere <div> hat seine display-Eigenschaft auf flex über .flex gesetzt und seine flex-direction ist mit .flex-col auf column eingestellt. Dann hat es dank .mb-4 etwas Abstand nach unten.

Währenddessen hat unser <label> dank .mb-2 etwas weniger Abstand nach unten. Die restlichen Klassen machen unseren Text großgeschrieben, fett, groß (1.125rem) und das dunkelste Grau in unserer Farbpalette.

Alles in allem eine ziemlich schnelle und einfache Möglichkeit, unsere Felder zu stylen! Nun fügen wir diese Stile zu unseren restlichen Feldern hinzu, stylen unseren Button und Link und sehen, was wir haben.

<form class="mb-6" action="/" method="post">
  <div class="flex flex-col mb-4">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
    <input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
  </div>
  <div class="flex flex-col mb-4">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="last_name">Last Name</label>
    <input class="border py-2 px-3 text-grey-darkest" type="text" name="last_name" id="last_name">
  </div>
  <div class="flex flex-col mb-4">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
    <input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
  </div>
  <div class="flex flex-col mb-6">
    <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
    <input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
  </div>
  <button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
</form>
<a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="/login">Already have an account?</a>

Hover-Stile hinzufügen

Jetzt fängt es an, besser auszusehen! In diesem Codeblock sollte alles ziemlich selbsterklärend sein. Wir haben jedoch eine neue Sache hinzugefügt: eine Zustands-Variante. Wenn wir uns unseren <button> ansehen, sehen wir eine davon in Aktion.

<button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>

Wenn Sie sich die Klasse direkt nach .bg-teal ansehen, sehen Sie, dass wir ein hover:-Präfix zu .bg-teal-dark hinzugefügt haben. Diese Präfixe ermöglichen es uns, Elemente beim Hovern und Fokussieren zu stylen, und sie ermöglichen uns auch, Breakpoints zu verwenden! Alles in allem ist dies ein ziemlich mächtiges Feature von Tailwind und ermöglicht es uns, dynamische, responsive UIs sehr schnell zu erstellen.

Jetzt schließen wir unsere mobile Ansicht ab, indem wir unser Formular in der Mitte des Bildschirms positionieren und einen farbenfrohen Seitenhintergrund hinzufügen.

<div class="flex items-center h-screen w-full bg-teal-lighter">
  <div class="w-full bg-white rounded shadow-lg p-8 m-4">
    <h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
    <form class="mb-4" action="/" method="post">
      <div class="flex flex-col mb-4">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
        <input class="border py-2 px-3 text-grey-darkest" type="text" name="first_name" id="first_name">
      </div>
      <div class="flex flex-col mb-4">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="last_name">Last Name</label>
        <input class="border py-2 px-3 text-grey-darkest" type="text" name="last_name" id="last_name">
      </div>
      <div class="flex flex-col mb-4">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
        <input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
      </div>
      <div class="flex flex-col mb-6">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
        <input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
      </div>
      <button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
    </form>
    <a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="/login">Already have an account?</a>
  </div>
</div>

Bada bing bada boom, wir haben ein gut aussehendes mobiles Anmeldeformular! Aber was passiert, wenn wir uns das auf einem größeren Bildschirm ansehen?

Responsives Design

Es ist sicherlich besser als unser reines HTML, aber es braucht noch etwas Arbeit. Verwenden wir einige der responsiven Zustands-Varianten und stylen wir es für größere Bildschirme.

<div class="flex items-center h-screen w-full bg-teal-lighter">
  <div class="w-full bg-white rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
    <h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
    <form class="mb-4 md:flex md:flex-wrap md:justify-between" action="/" method="post">
      <div class="flex flex-col mb-4 md:w-1/2">
        <label class="mb-2 uppercase tracking-wide font-bold text-lg text-grey-darkest" for="first_name">First Name</label>
        <input class="border py-2 px-3 text-grey-darkest md:mr-2" type="text" name="first_name" id="first_name">
      </div>
      <div class="flex flex-col mb-4 md:w-1/2">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest md:ml-2" for="last_name">Last Name</label>
        <input class="border py-2 px-3 text-grey-darkest md:ml-2" type="text" name="last_name" id="last_name">
      </div>
      <div class="flex flex-col mb-4 md:w-full">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="email">Email</label>
        <input class="border py-2 px-3 text-grey-darkest" type="email" name="email" id="email">
      </div>
      <div class="flex flex-col mb-6 md:w-full">
        <label class="mb-2 uppercase font-bold text-lg text-grey-darkest" for="password">Password</label>
        <input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">
      </div>
      <button class="block bg-teal hover:bg-teal-dark text-white uppercase text-lg mx-auto p-4 rounded" type="submit">Create Account</button>
    </form>
    <a class="block w-full text-center no-underline text-sm text-grey-dark hover:text-grey-darker" href="/login">Already have an account?</a>
  </div>
</div>

Dank unserer responsiven Präfixe sieht unser Anmeldeformular viel besser aus! Schauen wir uns unser <form> als Beispiel an.

<form class="mb-4 md:flex md:flex-wrap md:justify-between" action="/" method="post">
  <!-- ... -->
</form>

Genau wie bei unserem hover:-Präfix wenden wir die präfixierten Klassen nur an, wenn diese Bedingung erfüllt ist. In diesem Fall bedeutet dies, dass wir die Flex-Stile nur auf unser <form> anwenden, wenn die min-width der Seite 768px beträgt.

Utilities in Komponenten extrahieren

Nachdem wir unser Formular prototypisiert haben, können wir unsere Utility-Klassen in Komponentenklassen extrahieren. Beginnen wir mit der Extraktion unserer <input>-Klassen.

<input class="border py-2 px-3 text-grey-darkest" type="password" name="password" id="password">

Wie wir sehen, hat unser <input> einige Klassen. Wir können diese mit der @apply-Direktive von Tailwind in unser CSS extrahieren. @apply ermöglicht es uns, die gleichen Stile, die unsere Utility-Klassen verwenden, auf eine neue Klasse anzuwenden. Am Ende unserer styles.css-Datei können wir also Folgendes hinzufügen

.field {
  @apply .border .py-2 .px-3 .text-grey-darkest;
}

Dann, sobald wir unsere Tailwind-Dateien neu kompiliert haben, kann unser <input> einfach die Klasse .field haben.

<input class="field" type="password" name="password" id="password">

Wie Sie sehen, erhalten wir mit Tailwind das Beste aus Utility- und Komponentenklassen! Wir können mit Utility-Klassen schnell iterieren und immer noch Komponentenklassen extrahieren, wenn wir ein Muster erkennen.

Noch besser, wir können sie kombinieren, um diese Einzelfälle zu behandeln, bei denen dedizierte Komponentenklassen keinen Sinn ergeben.

Das finale CSS

Wenn wir dieses Denken auf den Rest unseres Codes anwenden, sehen unser CSS und HTML so aus.

@tailwind preflight;

/* Here we can add any custom overrides */

.field {
  @apply .border .py-2 .px-3 .text-grey-darkest;
}

.field-label {
  @apply .uppercase .font-bold .text-lg .text-grey-darkest .mb-2;
}

.field-group {
  @apply .flex .flex-col;
}

.btn {
  @apply .block .text-white .uppercase .text-lg .p-4 .rounded;
}

.btn-teal {
  @apply .bg-teal;
}

.btn-teal:hover {
  @apply .bg-teal-dark;
}

.link {
  @apply .block .no-underline .text-sm;
}

.link-grey {
  @apply .text-grey-dark;
}

.link-grey:hover {
  @apply .text-grey-darker;
}

@tailwind utilities;

/* Here we can add our own utilities or custom CSS */

Das finale HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tailwind Intro</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="flex items-center h-screen w-full bg-teal-lighter">
      <div class="w-full bg-white rounded shadow-lg p-8 m-4 md:max-w-sm md:mx-auto">
        <h1 class="block w-full text-center text-grey-darkest mb-6">Sign Up</h1>
        <form class="mb-4 md:flex md:flex-wrap md:justify-between" action="/" method="post">
          <div class="field-group mb-4 md:w-1/2">
            <label class="field-label" for="first_name">First Name</label>
            <input class="field md:mr-2" type="text" name="first_name" id="first_name">
          </div>
          <div class="field-group mb-4 md:w-1/2">
            <label class="field-label md:ml-2" for="last_name">Last Name</label>
            <input class="field md:ml-2" type="text" name="last_name" id="last_name">
          </div>
          <div class="field-group mb-4 md:w-full">
            <label class="field-label" for="email">Email</label>
            <input class="field" type="email" name="email" id="email">
          </div>
          <div class="field-group mb-6 md:w-full">
            <label class="field-label" for="password">Password</label>
            <input class="field" type="password" name="password" id="password">
          </div>
          <button class="btn btn-teal mx-auto" type="submit">Create Account</button>
        </form>
        <a class="link link-grey w-full text-center" href="/login">Already have an account?</a>
    </div>
  </div>
</body>
</html>

Wir haben unsere doppelten Klassen extrahiert und den Rest belassen. Wenn wir ähnliche Komponenten erstellen, können wir weitere Klassen extrahieren!

Zusammenfassung

Puh! Wir haben in diesem Beitrag sicherlich viel behandelt. Wir haben angefangen, unsere HTML-Muskeln zu dehnen, indem wir ein schnelles Formular erstellt haben, und dann haben wir einen Mobile-First-Ansatz für unsere Stile mit Tailwind verfolgt. Unterwegs haben wir gesehen, wie wir die Utility-Klassen von Tailwind verwenden können, um ein Element schnell zu stylen. Dann haben wir Zustands-Varianten verwendet, um einige dynamische Stile hinzuzufügen. Und schließlich haben wir gesehen, wie wir beides haben und genießen können, als wir unsere doppelten Klassen in Komponentenklassen extrahiert haben.

Ich hoffe, Sie konnten einen Eindruck davon bekommen, wie Tailwind Ihre eigenen Projekte beeinflussen kann. Wenn Sie mit diesem Projekt herumspielen möchten, können Sie gerne das Repo klonen und Tailwind selbst ausprobieren. Wie immer können Sie mir gerne Fragen auf Twitter stellen. Und bis zum nächsten Mal, viel Spaß beim Codieren!