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.

*

*

Empfholende Artikel


NVM – Noder Version Manager

February 18, 2022

Als Fullstack oder Frontendentwickler benötigt man heute eigentlich immerNodeJS. Zumindest bei einem modernen Stack. Um zum Beispiel JS, CSS Dateien zu kompilieren oder in verschiedene Packages zu bündeln um es dann in das Projekt zu laden. Oder seine lokale Entwicklungsumgebung mit nützlichen Tools zu bereichern wie zum Beispiel Linter, Typescript. Wenn man mehrer verschiedene Projekte […]

InnoDB vs MyISAM

January 29, 2022

InnoDB setzt man ein um schnell Daten auszulesen. SELECT Anfragen werden hier schnell ausgeführt. MyISAM hingegen ist bei SELECT anfragen etwas langsamer aber dafür bei INSERT und UPDATE Anfragen schnell wie der Blitz. Daher kommt es häufig vor, dass man in einer Datenbank beide Formate vortrifft. Ich habe ein Projekt bei dem ich die Pageviews […]

Git Branch master zu main umbennen

December 20, 2021

Zuerst benennen wir unser Master in Main lokal um: 2. Nun möchten wir auf unserem entferntem Repository das selbe tun. Ändert den master auf main in eurem entfernetem Repository (GitLab, GitHub etc.). Dann könnt ihr von lokal aus: den neuen branch bespielen. Um den master jetzt zu löschen folgendes eingeben: Ich persönlich fand es unnötig […]

Sprechblassen mit HTML und CSS bauen

November 22, 2021

Es kommt immer mal wieder vor, dass man eine Sprechblase zum Beispiel in einer Kommentarbox bauen muss. Wie war das gleich nochmal?!? Man kann sich ja nicht immer alles merken und es gibt im Netzt auch nützliche Generatoren für diese Fälle. Für Sprechblasen könnte man zum Beispiel diesen hier nehmen: https://www.html-code-generator.com/css/speech-bubble-generator . Mit ein paar […]

Table colspan und rowspan Generator

November 21, 2021

Komplizierte Konstrukte mit Tabellen abzubilden war eigentlich eine Dispziplinzwischen den Jahr 2000 und 2003 herum. Immer wieder kommen aber bei Stackoverflow Fragen auf, wie man solche oder solche Tabellen darstellt. Statt auf das coole und moderne Grid System zurückzugreifen wird noch mit Tabellen gearbeitet. Wie auch immer. Wer sich den Horror mit colspans und rowspan […]

Eine bestehende Datenbank auf einem Docker laufen lassen

November 11, 2021

Stellt euch vor ihr bekommt die undankbare Aufgabe ein altes WordPress Projekt zu upgraden. Das Projekt hinkt bereits zwei Major Releases hinterher. Das bedeutet ihr könnt nicht einfach im Produktivsystem ein upgrade vollziehen. Ihr müsst euch das Produsystem auf eure lokale Entwicklungsumgebung kopieren. Dafür eignet sich Docker ganz gut. Heute gehe ich davon aus, dass […]