Thumbnail

Mit Tailwind CSS eigene Komponenten Klassen nutzen

21. Dezember 2021
Michael Geyer

Was ist Tailwind CSS?

Tailwind CSS gehört zu den mittlerweile bekanntesten und meist genutzten CSS Frameworks. Daneben sind beispielsweise noch Bootstrap und Materialize zu nennen. Was Tailwind CSS interessant, aber auch auf den ersten Blick etwas “unsinnig” macht, ist der “utility-first” Ansatz. Es gibt CSS Klassen in diesem Framework wie “pt-4”, “flex” oder “text-center”, welche direkt einem entsprechenden HTML Element zugewiesen werden können.

Mit Tailwind CSS können HTML Dokumente schnell extrem unübersichtlich aussehen, was auch dich bestimmt erstmal abschrecken wird, wenn du davor gewohnt warst alles in eigene Klassen zu schreiben und dich vermutlich an CSS Methoden wie BEM gehalten hast.

<button class="
  inline-flex 
  text-white 
  bg-indigo-500 
  border-0 
  py-2 
  px-6 
  focus:outline-none 
  hover:bg-indigo-600 
  rounded 
  text-lg">Label</button>

Das Code-Beispiel zeigt einen Button der mit Tailwind CSS Klassen definiert wurde. Ganz schön viele Klassen, die hier verwendet werden und es wäre extrem aufwendig und fast schon Wahnsinn bei jedem Button der erstellt wird ständig all diese Klassen dazuzuschreiben.

Natürlich ist das heutzutage kein großes Problem mehr, wenn du beispielsweise ein JS Framework wie React oder Vue einsetzt, bei dem du den Button als Component einmal definierst und nur noch einsetzt. Auch bei WordPress kann das mithilfe eines Template Parts umgesetzt werden. Sollte so etwas möglich sein ist das auch der Ansatz, der gewählt werden sollte.

Doch was, wenn du weiterhin auch deinen eigenen Klassen definieren und trotzdem die Vorteile von Tailwind CSS nutzen möchtest. Das ist möglich!

Eigene Klassen nutzen

Zunächst sei erwähnt, dass es mehrere Möglichkeiten gibt Tailwind CSS in ein Projekt einzubinden. Egal wie es gemacht wird, es ist jederzeit ohne Probleme möglich eigenes CSS zu verwenden. Heißt, du kannst deine Klasse „button“ erstellen und dem HTML zuweisen. Das funktioniert auch in Kombination mit Tailwind CSS.

/* Hiermit ersetzen wir die Tailwind CSS Klassen rounded und text-lg */

.my-custom-button {
  /* text-lg */
  font-size: 1.125rem;
  line-height: 1.75rem;
  /* rounded */
  border-radius: 0.25rem;
}
<button class="
  my-custom-button 
  inline-flex 
  text-white 
  bg-indigo-500 
  border-0 
  py-2 
  px-6 
  focus:outline-none 
  hover:bg-indigo-600">Label</button>

In diesem Beispiel ersetzen wir einfach nur die zwei Tailwind CSS Klassen text-lg und rounded mit unseren eigenen Anweisungen. Das Ergebnis ist der gleiche Button Style.

Das ist aber nicht die Art und Weise, wie wir die Power von Tailwind CSS und unseren eigenen Klassen nutzen können. Außerdem ist das Ziel am Ende nur noch die Klasse “my-custom-button” im HTLM zu nutzen.

Hierfür bringt Tailwind CSS die Anweisung “@apply” mit mit Hilfe derer du auch innerhalb von CSS die utility Klassen nutzen kannst. Heißt du “räumst” dein HTML etwas auf, nutzt aber weiterhin das Tailwind CSS Framework.

/* Hiermit definieren wir die Klasse mit Hilfe der Tailwind CSS Utility Klassen */

.my-custom-button {
  @apply 
    inline-flex 
    text-white 
    bg-indigo-500 
    border-0 
    py-2 
    px-6 
    focus:outline-none 
    hover:bg-indigo-600
    rounded 
    text-lg;
}
<button class="my-custom-button">Label</button>

Um die eigene Klasse nun noch komplett in das Framework mit einzubinden und die Vorteile von zum Beispiel der just-in-time Kompilierung oder die Möglichkeiten der “responsive modifiers” zu nutzen, hat Tailwind CSS eine weitere Anweisung an Bord.

Mit “@layer” kannst du deine eigenen Klassen einer der von Tailwind CSS vordefinierten Ebene zuweisen. Den Button weisen wir natürlich der Ebene “components” zu.

/* Hiermit fügen wir die Klasse der Komponenten Ebene hinzu und definieren sie
mit Hilfe der Tailwind CSS Utility Klassen */

@layer components {
  .my-custom-button {
    @apply 
      inline-flex 
      text-white 
      bg-indigo-500 
      border-0 
      py-2 
      px-6 
      focus:outline-none 
      hover:bg-indigo-600 
      rounded 
      text-lg;
  }
}

Beispiel: .my-custom-button--large

Um dir an einem Beispiel zu zeigen, was nun möglich ist, nehmen wir an es soll eine zusätzlich Klasse my-custom-button erstellt werden. Diese soll modifiziert werden und nach dem BEM Methode mit –large gekennzeichnet werden. Der Button soll also größer werden und in unserem Beispiel ab einer entsprechenden Bildschirmbreite genutzt werden.

Dafür passen wir die utility Klassen “py-2” und “px-6” an, welche das vertikale sowie das horizontale Padding definieren.

@layer components {
  .my-custom-button {
    @apply 
      inline-flex 
      text-white 
      bg-indigo-500 
      border-0 
      py-2 
      px-6 
      focus:outline-none 
      hover:bg-indigo-600 
      rounded 
      text-lg;
  }
  
  /* Button Large */
  .my-custom-button--large {
    @apply py-3 px-12;
  }
}

In unserem HTML können wir nun die Tailwind CSS Breakpoint Zuweisung “lg:” an der eigenen CSS Klasse nutzen, um den Button in der größeren Variante ab einer Bildschirmbreite von 1024px anzuzeigen.

<button class="my-custom-button lg:my-custom-button--large">Label</button>

Die Nutzung von “lg:” ist möglich, da wir die Klasse my-custom-button--large mit Hilfe von “@layer” in die Komponenten Ebene des Tailwind CSS Frameworks eingebunden haben und mit den Anweisungen “py-3” und “px-12” das Padding entsprechend erhöhen.

Fazit

Tailwind CSS ist extrem flexibel und kann von dir auf unterschiedlichste Weise genutzt werden. Im besten Fall kannst du das Framework so nutzen, wie es von den Machern vorgesehen ist.

Besteht für dich aber nicht die Möglichkeit wiederverwendbare Komponenten oder Vorlagen zu erstellen, in denen du einmalig die Tailwind CSS utility Klassen zuweist, kannst du auf deine eigenen Klassen Definition zurückgreifen und trotzdem einige der Vorteile von Tailwind CSS nutzen.

Teile diesen Artikel gerne!

Schreibe einen Kommentar

Hier noch etwas interessantes für Dich dabei?

Thumbnail zu Behind the scenes - unsere Website

Behind the scenes – unsere Website

In diesem Artikel wollen wir Dir zeigen, wie unsere Website eigentlich entstanden ist. Vom Konzept über die Entwicklung bis hin zum Hosting. Wir nehmen Dich mal „Behind the scenes“ und zeigen Dir, was dabei alles so passiert.

💡 Mehr erfahren!

Du möchtest auf dem Laufenden bleiben und regelmäßig Tipps von uns erhalten, die Dir weiterhelfen? Dann abonniere unser #QbitOneMagazin und verpasse nichts mehr!

Deine Anmeldung konnte nicht gespeichert werden. Bitte versuche es erneut.
Deine Anmeldung war erfolgreich.