Warum benutzt man Tailwind CSS?

Wenn man mitten in den HTML Code , sowas schreibt wie

<p class="bold-900"> test </p>

Dann ergibt das für mich noch keinen sinn aus drei Gründen.

1. Man kann zwar bei wenig Code schnell im Code sehen was passiert aber schnell wird das doch komplett unordentlich, als würde wenn man <p style="color:red;"> benutzen.
2. Es ist doch Dumm sich die ganzen Tailwind Klassen auswendig zu lernen anstatt gleich die CSS Eigenschaften. Es macht doch kaum einen unterschied, ob font-size : 50px oder class="fontsize-50".
3. Tailwind hat auch keine fertige Komponenten wie Bulma oder Bootstrap falls man keine lust hat mal irgendwas selber zu machen.

Oder wie seht ihr das ?

Lerne zurzeit React und in vielen React Tutorials wird Tailwind genutzt.

Lohnt sich das so viel mehr als normales Css/Scss zu benutzen ?

Answer 1

[4hnungsl0s]

Es stimmt, dass viele der Klassen relativ unnötig sind.

Die benutzt man nur, wenn man eh schon Tailwind benutzt (wie von @triopasi geschildert), bzw. Schnell was an allem ändern möchte.

Grundsätzlich eine Entscheidung je nach eigenen Vorlieben.

Answer 2

[triopasi]

Du hast falsche annahmen.

1. Tailwind etc benutzt du wenn du CSS schon kannst. Nicht um CSS zu ersetzen!

2. Die Installation ist noch nur npm i aber kompliziert ist das auch keineswegs. Du kennst dich nur offensichtlich nicht so gut aus.

3. Du benutzt es um schneller und konsistente zu arbeiten. Sonst müsstest du dir immer merken welche Farben du hast, wie groß deine Schatten nochmal waren.. etc etc..

Irgendwann (wenn du mehr Erfahrung hast oder an einem größeren System baust) wirst du selbst auch solche "utility" CSS-Klassen schreiben. Da kannst du sie dir auch einfach per Tailwind installieren und musst selbst nicht mehr so viel nachdenken wie man das gut strukturiert.

Woher ich das weiß: Studium / Ausbildung – Informatikstudium

Comments

[qwertzujn]

 Du benutzt es um schneller und konsistente zu arbeiten. Sonst müsstest du dir immer merken welche Farben du hast, wie groß deine Schatten nochmal waren.. etc etc..

Das ist aber nichts anderes als

<p style="
  box-shadow:10px 10px 10px 10px black;
color:red;
font-size:16px;
text-align:center;
background-color:yellow;
">hallo</p>

und das sollte man eigentlich immer vermeiden wenn es geht.

 Die Installation ist noch nur npm i aber kompliziert ist das auch keineswegs. Du kennst dich nur offensichtlich nicht so gut aus.

Es klingt nicht kompliziert , ich kenne npm usw.. aber das jedes mal bei einem Projekt machen ist aufwendig .

Irgendwann (wenn du mehr Erfahrung hast oder an einem größeren System baust) wirst du selbst auch solche "utility" CSS-Klassen schreiben. Da kannst du sie dir auch einfach per Tailwind installieren und musst selbst nicht mehr so viel nachdenken wie man das gut strukturiert.

Was genau sind diese utility CSS Klassen ?

[triopasi]

@qwertzujn

Genau das ist es! Inline-CSS ist eine ganz, ganz doofe Idee! Merkst du noch nicht wenn dein Projekt nur 3 Seiten hat. Wenn du aber mal 30 Files mit Styling hast oder 100, dann merkst du das ganz ganz schnell.

Aufwändig? Das ist doch in 2 Minuten gemacht. Setze mal ein großes Projekt auf, da sind 2 Minuten nichts.

Alles, was du andauernd wiederverwendet. Schatten, Layout,.. Standarddesigns. Genau das, was Tailwind bereitstellt.

[qwertzujn]

@triopasi

. Setze mal ein großes Projekt auf, da sind 2 Minuten nichts

Ein react Projekt zu erstellen dauert bei mir schob 5 minuten. Dann alle ordner erstellen, Den müll löschen

Und Irgendwann will man halt mal anfangen 😂

Alles, was du andauernd wiederverwendet. Schatten, Layout,.. Standarddesigns. Genau das, was Tailwind bereitstellt.

Versteh ich nicht

Klassen kannst du auch so mit css wiederverwenden.

Hast du irgendein beispiel, vielleicht versteh icj es dann

[triopasi]

@qwertzujn

Auch 5 Minuten ist lächerlich wenig.. Arbeite mal an etwas was kein Lern-Beispielprojekt ist und etwas mehr Komplexität hat.

Ja, habe ich. Wenn du CSS wiederverwenden willst, z.B. für Layout oder Boxen mit Schatten, bestimmte Unterstreichungen für Tooltips oder die Tooltips selbst.. Dann machst du genau das, was du dir einfach per Tailwind hättest direkt installieren können. Nur machst du es selbst. Und es Dauer viel länger. Und du musst gut sein, damit du das ordentlich machst. Nur hast du es schon fertig (mehr oder weniger) wenn du einfach Tailwind installierst.

Aber ganz ehrlich, für dich scheint das noch nicht relevant zu sein. Schreibe selbst CSS, lerne erstmal wie das richtig geht. Dann wirst du irgendwann selbst feststellen, dass Tailwind oder andere gar keine so doofe Idee sind.