Rückenwind? Ich werde vorbeigehen

Kürzlich habe ich Tailwindcss in einem Projekt verwendet und wissen Sie was? Es war, gelinde gesagt, eine augenöffnende Erfahrung.

Einige von Ihnen fragen sich vielleicht: Was ist Tailwindcss?

Tailwind CSS ist die bislang am schnellsten wachsende CSS- Bibliothek. Es hat sich schnell zu einem unverzichtbaren Tool für Front-End-Entwickler entwickelt. Viele Frontend-Entwickler nutzen es in Großprojekten und stoßen dabei auf minimale Probleme. Die Verbesserungen bei der Entwicklung und dem Design von Websites und Web-Apps sind unbestreitbar bemerkenswert.

Also, was ist das Problem? Warum steht im Titel „ Tailwindcss“? Nein Danke “?

Dieser Titel deutet darauf hin, dass es Fälle geben könnte, in denen Tailwind CSS trotz seiner Exzellenz nicht die optimale Wahl für Ihre Projekte ist. Warum könnte das so sein? Es gibt eine Antwort. Doch bevor wir uns mit der Erklärung befassen, wollen wir die Grundlage für diese Untersuchung der Technologie schaffen.

Was ist mit all den CSSs?

Bevor wir uns mit Tailwindcss und seinen Entwicklungsdetails befassen können, müssen wir einige Voraussetzungen erfüllen.

Was ist CSS?

CSS steht für Cascading Style Sheets. Die beste Definition für CSS stammt meiner Meinung nach von techterms.com

„CSS ist eine Stylesheet-Sprache, die zum Formatieren von Inhalten in HTML-Webseiten verwendet wird. CSS-Stylesheets können das Erscheinungsbild und die Formatierung von Text, Tabellen und anderen Elementen unabhängig vom Inhalt selbst definieren. Stile können in der HTML-Datei einer Webseite oder in einem separaten Dokument gefunden werden, auf das mehrere Webseiten verweisen.“

In nicht so vielen Worten: CSS ist die Stilsprache. Sie verwenden CSS für HTML- Elemente, um Ihrer Webseite oder Web-App ein hervorragendes Aussehen zu verleihen.

Was ist Tailwindcss?

Nach den Worten des Tailwindcss-Teams selbst ist Tailwindcss „ ein Utility-First-CSS-Framework voller Klassen wie flex , pt-4 , text-center und rotate-90 , die zusammengestellt werden können, um jedes Design direkt in Ihrem Markup zu erstellen “.

Dies bedeutet im Wesentlichen, dass Rückenwind-CSS die ursprünglichen CSS-Prozeduren und -Operationen übernimmt und diese dann einfacher durchzuführen und zu implementieren macht.

Wir haben bereits die Grundlagen von CSS und Tailwind CSS besprochen. Lassen Sie uns nun tiefer eintauchen und untersuchen, wie Tailwind CSS zusammen mit seinen entsprechenden CSS-Gegenstücken in der Praxis funktioniert. Diese Untersuchung wird uns schließlich zu der Schlussfolgerung führen, zu der ich während meines Projekts mit Tailwind CSS gelangt bin.

Mein Fazit ist, dass Tailwind CSS am besten für größere und komplexere Frontend-Projekte geeignet ist. Die Standardauswahl für die meisten Situationen sollte jedoch immer noch „Vanilla“-CSS sein. Mit anderen Worten: Die Verwendung von CSS in seiner reinsten Form ist für die meisten Personen und Szenarien im Allgemeinen vorteilhafter als jede zusätzliche Bibliothek, sei es Tailwind CSS oder andere.

Unterschiede zwischen CSS und Tailwindcss

Wie sieht Tailwindcss aus? Vergleichen wir, indem wir ein Vanilla-CSS-Äquivalent und dann ein Tailwindcss-Äquivalent erstellen.

Lassen Sie uns aufschlüsseln, was im obigen Text vor sich geht. Es ist ein HTML 5- Auszug und wir erstellen eine Schaltfläche.

Um die Schaltfläche zu erstellen, richten wir sie über „ Divs “ ein – im Wesentlichen kleine Container zur Eingabe von Dingen zum Ändern unserer Website oder Web-App. Wir geben jedem Div eine eigene „ Klasse “, damit wir später in unserer separaten CSS-Datei auf dieses bestimmte Element verweisen können. Allerdings können Sie Divs auch ihre eigenen „ IDs “ geben. Sie können CSS-Änderungen „ inline “ vornehmen, was bedeutet, dass Sie CSS direkt in die HTML-Datei einfügen können, die meisten neigen jedoch aus Organisationsgründen dazu, dies zu vermeiden.

Wie könnte unser Code zum Bearbeiten der Schaltfläche in der CSS-Datei aussehen?

Im obigen Code interagieren wir mit der Schaltflächenklasse im HTML-Auszug. Sie machen Ihre CSS-Datei auf Ihre HTML-Klassen aufmerksam, indem Sie einen Punkt am Anfang des Klassennamens selbst setzen. Darunter richten wir der Reihe nach die Schaltfläche mit „ align-items “ an der Mitte des Div aus. Unterhalb von align-item befindet sich der „ Hintergrundclip “, der definiert, wie weit die „ Hintergrundfarbe “ gedehnt wird und nicht darüber hinaus. Der „ Rand “ ist die Dicke der Seiten des Knopfes und der Randradius gibt an, wie gebogen die Kanten sind. Alles, was wir gerade erwähnt haben, trägt zur Entwicklung des Knopfstils bei. Wie wir sehen, scheinen die ursprünglichen CSS-Stile recht einfach zu sein. Wie würde Tailwindcss mit demselben Fall umgehen?

Warte was? Haben wir gerade CSS-ähnlichen Code in eine HTML-Datei eingefügt? Ja, das haben wir. Was Sie sehen, ist das Äquivalent der vorherigen Codebeispiele in Tailwindcss. Dies ist tatsächlich eines der einzigartigeren Attribute von Tailwindcss. Wenn Sie Tailwindcss verwenden, legen Sie Ihren separaten CSS-Code nicht in einer anderen Datei ab. Ihr gesamter Tailwindcss-Code geht direkt in Ihre HTML-Datei. Wie bereits erwähnt, vermeiden Entwickler traditionell die Inline- CSS-Codierung. Mit Tailwindcss ist Inline-Codierung nicht mehr wirklich eine Option, sondern fast notwendig. Der Tailwindcss wird vollständig durch Klassenidentifikation implementiert.

Was macht der obige Code nun? Es macht genau das, was der ursprüngliche CSS-Code macht, wenn auch etwas anders.

Werfen wir noch einmal einen Blick auf normales CSS im Vergleich zum Tailwindcss-Gegenstück.

Im obigen Bild importieren wir in einem HTML5- Dokument ein Bild von Schokolade unter der Klasse „ card-img “. Schauen wir uns an, wie das entsprechende CSS aussieht.

Der obige CSS-Code ähnelt dem letzten. Eine tiefgreifende Extrapolation ist nicht erforderlich. Wir definieren das Aussehen der Schokoladenkarten. Schauen wir uns nun die viel interessantere Tailwindcss-Variante an.

Der obige Code ist das Tailwindcss-Äquivalent. Es ist viel einfacher und eleganter, erfordert aber viel mehr Aufwand, um zu wissen, was alles bedeutet und wie man Aussagen positioniert. Ist das also ein Vorteil gegenüber herkömmlichem CSS?

Die Natur von Tailwindcss macht es sehr chaotisch. Ihr gesamter Code, sowohl HTML als auch CSS, befindet sich in einer Datei und ist lang und scheinbar überfüllt. Dies erschwert die Entwicklung.

Was sind die Hauptnachteile von Tailwindcss?

• Steile Lernkurve, an die man sich erst nach einiger Zeit gewöhnen muss.
• Es müssen benutzerdefinierte Klassenkomponenten erstellt werden. (Dies kann sich bei einem langen Projekt zu einer Menge summieren).
• Verwirrend, weil HTML und Stil gemischt sind

Was sind seine Hauptvorteile ?

• Hochgradig anpassbar

• Schnellere Entwicklung

• Konsistente Formulierungen und Muster, unabhängig davon, was hinzugefügt oder bearbeitet wird.

  
  

Wir haben Beispiele von Tailwindcss gesehen und kennen nun die wichtigsten Vor- und Nachteile. Aber wie beliebt ist es?

Es wurde sowohl von alten als auch neuen Entwicklern übernommen und verbreitet.

Vivian Guillen von tailwindweekly.com gab an, dass Tailwindcss bis zum 19. November 2022 wöchentlich 4,5 Millionen Downloads verzeichnete. Während ich dies schreibe, hat es 336 Millionen Downloads, wenn Sie auf npmjs.com gehen und nach Tailwindcss suchen. Seit der Veröffentlichung vor fünf Jahren sind das durchschnittlich 184.110 Downloads pro Tag. Unglaublich viele Downloads.

Entspannen Sie sich bei Rückenwind

Zu Beginn dieses Artikels habe ich geschrieben: „ Es kann vorkommen, dass Tailwindcss nicht die optimale Lösung für Ihre Projekte ist.“ Warum habe ich das geschrieben? und wie hängt es mit dem Titel zusammen? „Rückenwind? Ich werde vorbeigehen ".

Tailwindcss ist weltweit bei fast allen Frontend-Entwicklern beliebt, es scheint einfacher zu implementieren als herkömmliches CSS und bietet mehr Anpassbarkeit als andere Technologien dieser Art. Verdammt, meine Verwendung davon hat sogar diesen Artikel selbst inspiriert. Warum zweifle ich dann immer noch daran? Weil ich es natürlich benutzt habe .

Tailwindcss ist genauso gut, wie alle behaupten, und noch mehr. Ebenso ist es genauso schlimm, wie die Leute es behaupten. Die Natur von Tailwindcss macht die Arbeit an kurz- bis mittelfristigen Projekten kompliziert, die Lernkurve behindert Ihre Entwicklung völlig, das Beharren auf der Herstellung benutzerdefinierter Komponenten usw. All das macht Tailwindcss auf kurze Sicht unerträglich. Nur kurzfristig!

Das bedeutet, dass Tailwind CSS umfangreichen, komplizierten Projekten von Entwicklern und Unternehmen vorbehalten bleiben sollte. Bei kürzeren Projekten empfiehlt es sich, sich an herkömmliches CSS zu halten. Dadurch wird verhindert, dass Ihre CSS-Kenntnisse nachlassen, und Sie vermeiden, dass Sie sich zu sehr auf Shortcut-Frameworks wie Tailwind CSS verlassen. Warum solltest du mir glauben? Ich habe mich der Herausforderung gestellt, Tailwind CSS für ein kleineres Projekt einzusetzen, und es hat wirklich gezeigt, warum es besser für umfangreiche, dauerhafte Unternehmungen geeignet ist. Ich freue mich darauf, mich mit anderen CSS-Frameworks zu befassen und vielleicht sogar Artikel darüber zu verfassen!

Das erfahrt ihr, wenn ihr mich abonniert und wir uns bald wiedersehen ;)