Tailwind vs Bootstrap vs CSS - Was ist besser?

Tailwind vs Bootstrap vs CSS - Was ist besser für dein nächstes Projekt und welche Vorteile und Nachteile hat jedes einzelne Tool. Solltest du Vanilla CSS oder ein CSS Framework verwenden? Anhand eines praktischen Beispiels möchte ich dir die Wahl erleichtern. Happy Coding!

⏩ Videoinhalt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:00 Einleitung
02:28 CSS Beispiel
10:34 Bootstrap Beispiel
14:22 Tailwind CSS Beispiel
21:42 CSS Pro/Kontra
26:38 Bootstrap Pro/Kontra
31:40 Tailwind Pro/Kontra
34:07 Meine Empfehlung

⭐ Das könnte dich auch interessieren
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Tailwind CSS Tutorial Deutsch für Anfänger:

Bootstrap Tutorial Deutsch für Anfänger:

CSS Tutorial Deutsch für Anfänger:

📌 Über diesen Kanal und mich
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Webentwicklung effizient und einfach. Alles rundum Webentwicklung, Webdesign und angrenzende Themen. Mein Name ist Mario und ich bin bereits seit über 15 Jahren als Webentwickler tätig. Einige Tutorials auf diesem Kanal sind für absolute Anfänger ohne Vorkenntnisse geeignet, und andere für erfahrene Entwickler.

Starte Jetzt!

#Tailwind #Bootstrap #ProgrammierenM

[ProgrammierenMario]

Dir gefällt das Video und möchtest mehr Vergleichsvideos dieser Art? Dann gib dem Video doch einen Daumen nach oben! 👍😀

[focushing]

Hab dir nun schon bei einigen Videos über die Schulter geguckt und bin begeistert von deinem Fachwissen und von deiner klugen Art der Wissensvermittlung. Ganz herzlichen Dank! ❤️

[SReini]

Sehr gut die Unterschiede und Vorteile jeder Lösung erklärt.👍

[Niko-hzct]

Herzlichen Dank für den ausführlichen Vergleich!

[mauriceOverIP]

Vielen Dank für den Vergleich der beiden CSS-Frameworks Tailwind und Bootstrap. Was unerwähnt blieb, sind die Javascript Komponenten, die in Bootstrap vorhanden sind, wie Modal, Popover, Dropdowns etc. die sehr schnell benötigte Funktionalitäten bereitstellen und eine Seite zum Leben erwecken.

[ITSplit]

Sehr gut und verständlich erklärt, obwohl ich das alles schon weiss, habe ich es mir bis zum Ende angeschaut, man weiss ja nie was man noch lernen kann :)

[liambmn]

Sehr gute und anschauliche Erklärung. Hast es auf den Punkt getroffen, Danke!

[top-reinigungdresden]

Danke, das war einer der besten Erklärungen für den Vergleich. Es bringt mehr Klarheiten was man will und welche Möglichkeiten man nutzen kann. Noch mal vielen Dank.

[frederikdiekmann]

Sehr guter Vergleich! Bin momentan ein echter Tailwind Fan, finde es einfach super. Man muss nicht so viel CSS selbst schreiben, hat aber doch fast die volle Kontrolle

[Mobynet]

Vielen Dank, das Video hat mir sehr geholfen und es genau das was mich gerade beschäftigt.. Meine Meinung zu Bootstrap und Tailwind, mir gefallen einfach nicht die Klassen die man dort ein trägt weil das wirklich sehr unübersichtlich ist . Ich arbeite mit CSS und BEM Schreibweise zum Beispiel header > header_container >header-h2 > header-p . Meiner Meinung nach um es übersichtlicher zu halten, sollte man auch scss benutzen, der Vorteil man kann Direkt den Media Query rein schreiben in das css, nach dem kompilieren ist in deiner css datei alles schön untereinander. eine Tolle Sache

[andreameyer]

Danke, du konntest mir sehr helfen. Ich komme von Dreamweaver, bin jetzt auf Pinegrow umgestiegen und stand vor der Wahl, wie ich meine alten eigenen Seiten modernisiere.

[danielpaulplanzer]

Coole Geschichte, viel Interessantes, ich hätte gerne auch dein Wissen. Grüsse Dany

[heinrichschiller]

Ich verwende für Webprojekte fast nur noch Bootstrap. Aber ich habe mich dazu über Jahre auch einarbeiten müssen. In der Bootstrap-Doku wird beschrieben wie das anpassen kannst. Dazu musst man sich dann mit SCSS, Webpack, JS und den Bootstrap-Modulen auskennen, aber das kommt mit der Zeit. Irgendwann ist man genauso schnell, als ob man nur eine CSS-Datei anlegen würde um da etwas CSS zu schreiben. Man kann das Bootstrap Design zu 100% komfortabel ändern.

Tailwind nutzte ich bisher zwar nicht, es macht mich auch etwas skeptisch wenn man den Code hinterher wieder abändern soll. Bei vielen Klassen zu einem Element fehlt mir da die Übersichtlichkeit, was ich schon bei Bootstrap manchmal Grenzwertig finde.

Mit normalen CSS muss man sich als Frontend-Entwickler sowieso auskennen, den das Wissen über CSS ist dann für Bootstrap und Tailwind wichtig.

[andreameyer]

Tja. Ich wollte meine Seite jetzt mit Pinegrow anhand einer Taiwind-Vorlage neu erstellen und bekomme aber in Pinegrow dieses Design Panel nicht angezeigt, auch nicht die Floating Tools. Scheinbar muss man zusätzlich den Tailwind Editor kaufen.

[andreameyer]

Frage: Wie machst du das, dass du auf der linken Seite die Browser-Vorschau hast? Ist dazu einfach nur einer deiner Browser geöffnet? Oder ist das in VSC implementiert?

[McMusic]

danke für alles Mario. Doch eine Frage: Wie kann ich meine WebApp auf Portrait fixieren?

[mydetlef]

Ein Hobbyentwickler der "sein" Projekt lange pflegt und hegt meinetwegen Vanilla CSS. Aber wenn mehrere Entwickler ein längeres Projekt bauen und pflegen sollen dann ist Tailwind auf jeden Fall empfehlenswert - weil halt Doku und Struktur da ist. Und für die schnelle Nummer mit weniger Aufwand und weniger Einflussmöglichkeit: Bootstrap.
Vanilla CSS ist eigentlich nur für das Lernen wichtig oder für wirklich simple Projekte.
Ausnahmen sind HTML Emails. Die sollten das CSS eingebettet haben (schon aus Datenschutzgründen) und da würde ich zu Vanilla CSS neigen.

[danielpaulplanzer]

Ich habe mich vor vielen Jahren für Bootstrap entschieden, da mein Thema wichtiger war als der Weg an das Ziel. Zudem lässt sich das Bootstrap danach anpassen.

[llothar]

Mit dem CSS Grid und neuen Methoden zum HTML Text zusammenzusetzen kann ich jetzt sagen das beides so was von 2005 ist.

[benjaminschmidt]

In welchem Vergleich steht denn hier WordPress?
Kenne jetzt wirklich nur tailwind von dir.