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


Laravel Mailhog Docker

October 20, 2021

Letztens wurde ich gefragt, wie ich Mail bei Laravel teste. Ich meinte ich habe einen SMTP Server den ich nutzen kann. Da meinte er, dass wäre zwar okay aber man könnte sich damit auch eine valide Mailadresse verbrennen. Mit verbrennen meint der Kollege, dass sie global als SPAM Mailadresse angerechnet werden kann. Falls die Tests […]

MySQL über die Console

October 16, 2021

Vielleicht geht es euch ja wie mir. Ständig vergesse ich die MySQL Commands. Schnell kommt es vor, dass man in einer MySQL Docker Instanz etwas an der Datenbank machen muss. In meinem Fall, der mich dazu brachte es ein für alle mal die wichtigsten MySQL Commands niederzuschreiben, war es, dass meine Docker App ständig meinte […]

Docker: Laravel 8 mit PHP 8

October 15, 2021

Moinsen Leute! Laravel 8 mit PHP 8 auf einem nginx mit node 14 laufen lassen. Wer das benötigt, der sollte folgende docker config nutzen. Wer eine andere Node Version braucht, der schaut hier nach welche er braucht und kopiert den Link hier zur geeigneten Nodejs Distribution rein. Und hier die Docker-compose.yml Datei. Lege einen nginx […]

Git Remote Eintrag löschen

October 15, 2021

Ihr habt ein lokales Repository und ein Remote Repository. Das Remote Repository liegt zum Beispiel bei GitHub und ihr wollt es nun aber bei GitLab unterbringen. Wie löscht man jetzt die Remote Config im lokalen Git Projekt Verzeichnis. Falls ihr noch nicht in dem gewünschten Verzeichnis seid, dann aber schnell hin da. Mit git status […]

Docker GUI – Portainer easy und übersichtlich

October 6, 2021

Klar, ich mag die Kommandozeile. Für alle möglichen Aufgaben ist sie mein zuverlässiger Begleiter. So auch im Docker Umfeld. Die Commands sind eigentlich einfach aber man vergisst schnell wieder einiges und muss dann im Netz Nachschlagen. Vielleicht geht es euch ja genau so? Und für Docker gibt es eine freie und wirklich gute GUI. Sie […]

Tailwind Purge unter npm run dev laufen lassen

August 28, 2021

Einer der Hauptgründe warum ich von Bootstrap auf TaiklwindCSS umgestiegen bin, ist der realisierte Traum von relative kleinen CSS Dateien. Statt ein ganzes CSS Framework immer und wieder zu laden, kann man mit TailwindCSS nur den wirklich im Code benötigten Style generieren lassen. Also eine 100% Effizienz, was bedeutet wir sparen Ressourcen. Und zwar Strom […]