Tailwind CSS – Ein kurzer Einstieg

Seit Jahren nutze ich Bootstrap. Ich dachte nicht mal im Traum dran, dass es etwas Besseres im Punkto Websitedesign geben wird. Es ist einfach, praktisch und man kann relative schnell ansprechende bzw. aufgeräumtes Designs umsetzen. Allerdings hatte Bootstrap für mich immer einen bitteren Beigeschmack. Ein Gedanke den ich nie zulassen wollte. Und zwar: Bootstrap sieht in 99 Prozent der Fälle aus wie Bootstrap. Es ist auch immer ein größerer Anbach eigene Desigelemente zu implementieren. Bootstrap Formulare sind zwar praktisch aber in den seltensten Fällen schön. Die Navbar wirkt auch immer irgendwie wie bürokratisch / beamtenmäßig. Und am meisten störte mich das man bis Bootstrap 4 Jquery implementieren musste. Ein Javascript Framework was ich immer seltener nutzen mag. Alles im Allen: Bootstrap Webseiten sehen auch immer irgendwie aus wie Backendentwickler (Jeans, Jack Wolfskin Jacke, allways functional Clothes) – langweilig.

In einem aktuellen Projekt musste ich mich mit Tailwind CSS beschäftigen. Zuerst dachte ich alter Wein in neuen Schläuchen und hatte auch nicht wirklich Bock auf ein Weiteres Möchtegern fancy Entwicklungstool. Wie bereits Eingehens geschrieben: „Bootstrap for ever!“

Gamechanger – Der Utility First Ansatz von TailwindCSS

Aber dann kam TailwindCSS. Und ziemlich schnell merkte ich, dass Tailwind das Zeug hat zum Gamechanger. Das Konzept ist ist eigentlich nichts weltbewegendes aber niemand hat es zuvor in diesem Umfang und konsequent durchgesetzt. Das Konzept heißt: Utility First. Statt vordefinierte Klassen und Komponenten nutzt man Toolsets und definiert sein Design selbst. Man arbeitet nur noch mit Klassen im HTML und schreibt kein CSS mehr. Um das Verstehen zu lernen gehen wir umgehend in den praktischen Teil über. In meinem Beispiel möchte ich mit Euch eine einfache Shopdetailseite bauen.

Shop Produkt Übersicht mit TailwindCSS und Alpine.js

Link zur Demo BikeShop Test Seite

Und hier der Link zum Tutorial um dieses Ziel zu erriechen. (coming soon)


Leave a Comment

Your email address will not be published. Required fields are marked *

*

*

Empfholende Artikel


Git – Closing a Branch – Was soll das sein?

May 4, 2021

Wer mit Bitcucket arbeitet kennt den Terminus. Nach einem erfolgreichen Merge auf den Master kann der Branch mit einem Häckchen in einer Checkbox geschlossen werden. Unter den Kollegen ist man sich einig. Branch immer schließen. Bloß warum? Zuerst sollte erwähnt werden, dass es in Git kein explizietes Branch closen gibt. Man kann einen Branch aber […]

Git Pull Request enthält fremde Commits

April 2, 2021

Vielleicht ist das euch auch schon mal passiert. Mir jedenfalls passiert das immer mal wieder mal. Ich checke in ein Branch ein um zum Beispiel ein Code Review vorzunehmen. Nachdem ich fertig bin, schnappe ich mir ein Ticket und eröffne einen neuen Feature Branche. Der eine oder andere ahnt bestimmt schon, worauf ich hinaus will? […]

Git Commit Message Regeln

March 22, 2021

Lange Zeit war mir das auch nicht klar, dass es Regeln für Git Commit Messages gibt. Wie sinnvoll die Regeln sind erschließt sich spätestens dann wenn man in größeren Teams arbeitet. Diese 7 Regeln möchte ich euch hier kurz erklären. Die Regel hat der Softwareentwickler Chris Beams vor einiger Zeit erstellt und auf seinem Blog […]

HTML Boilerplate / Scaffold / Vorlage

February 13, 2021

Um schnell mal etwas auszuprobieren, kann es sein das man ein HTML Grundgerüst benötigt. Vielleicht geht es euch ähnlich wie mir. Ich bin faul uns suche dann im anderen Projekten schnell das Gerüst. Was aber immer mit nicht ganz ohne Aufwendung dann einzufügen ist. Man muss hier und dort noch was löschen bzw. korrigieren. Aus […]

Docker auf Ubuntu 18.04 installieren

February 13, 2021

Docker auf einem frischen Ubunto 18.04 installieren geht in wenigen Schritten. Mit frischem meine ich ein System wo noch keine ältere Dockerversion vorher lief. Wir holen jetzt paar Pakete die wir für die Docker Installation brauchen rein. Nun fügen wir den GPG Key/Schlüssel für das offizielle Docker Repository hinzu. (ist ein freies Kryptographiesystem) Jetzt fügen […]

Git – Neuen Branch verwerfen / löschen

February 10, 2021

Es kommt vor, dass man ein Feature für ein Projekt entwickeln soll und man zuerst ausprobiert was so geht. Ihr arbeitet an einem Remote Repository und entwickelt lokal. Dann schnell mal ein composer update und die composer.lock ist geändert. Ihr wollt am liebsten den ganzen Branch verwerfen und zum Step zurück wo ihr angefangen habt. […]