Tailwind CSS: CSS-Framework und API für schnelles, reaktionsschnelles Design

CSS-Framework für Rückenwind

Obwohl ich mich täglich intensiv mit Technik beschäftige, habe ich nicht so viel Zeit, wie ich möchte, um die komplexen Integrationen und Automatisierungen zu teilen, die mein Unternehmen für Kunden implementiert. Außerdem habe ich nicht viel Zeit zum Entdecken. Die meisten Technologien, über die ich schreibe, sind Unternehmen, die danach suchen Martech Zone darüber zu berichten, aber hin und wieder – insbesondere über Twitter – sehe ich einige Aufregung um eine neue Technologie, die ich teilen muss.

Wenn Sie im Webdesign, in der Entwicklung mobiler Apps oder einfach nur in einem Content-Management-System arbeiten, haben Sie wahrscheinlich mit den Frustrationen konkurrierender Stile in mehreren Stylesheets zu kämpfen. Selbst mit den erstaunlichen Entwicklungstools, die in jedem Browser integriert sind, kann das Aufspüren und Bereinigen von CSS viel zu viel Zeit und Energie erfordern.

CSS Frameworks

In den letzten Jahren haben Designer ziemlich erstaunliche Arbeit geleistet, indem sie Kollektionen von Stilen herausgebracht haben, die vorbereitet und einsatzbereit sind. Diese CSS-Stylesheets sind besser bekannt als CSS-Frameworks und versuchen, all die verschiedenen Stile und Reaktionsfähigkeiten zu berücksichtigen, sodass Entwickler nur auf ein Framework verweisen können, anstatt eine CSS-Datei von Grund auf neu zu erstellen. Einige beliebte Frameworks sind:

  • Bootstrap – ein über ein Jahrzehnt weiterentwickeltes Framework, das erstmals von Twitter eingeführt wurde. Es bietet unzählige Funktionen. Es hat Nachteile, erfordert SASS, ist schwer zu überschreiben, hängt von JQquery ab und ist ziemlich schwer zu laden.
  • Bulma – ein sauberes Framework, das entwicklerfreundlich ist und keine Abhängigkeit von JavaScript hat.
  • Foundation – ein generischeres und benutzerfreundlicheres CSS-Framework mit Tonnen von Komponenten, die leicht anpassbar sind. Außerdem gibt es Stiftung für E-Mail . Bewegungs-UI für Animationen.
  • UI-Kit – eine Kombination aus HTML, JavaScript und CSS, um Ihr Frontend schnell und einfach zu entwickeln.

CSS-Framework für Rückenwind

Während andere Frameworks gängige Elemente der Benutzeroberfläche hervorragend unterbringen, verwendet Tailwind eine Methode, die als . bekannt ist Atomare CSS. Kurz gesagt, Tailwind organisierte die Klassennamen auf geniale Weise mit natürlicher Sprache, um das zu tun, was sie vorgeben. Obwohl Tailwind keine Komponentenbibliothek hat, ist die Möglichkeit, einfach eine leistungsstarke, reaktionsschnelle Benutzeroberfläche zu erstellen, indem einfach auf CSS-Klassennamen verwiesen wird, elegant, schnell und unvergleichlich.

Hier sind einige wirklich tolle Beispiele:

CSS-Raster

CSS-Spalte Startraster Spalten

CSS-Verläufe

CSS-Verläufe

CSS für die Unterstützung des dunklen Modus

CSS-Dunkelmodus

Rückenwind hat auch eine fantastische Erweiterung verfügbar für VS Code, damit Sie Klassen einfach aus dem Code-Editor von Microsoft identifizieren und einfügen können.

Noch genialer ist, dass Tailwind beim Erstellen für die Produktion automatisch alle ungenutzten CSS entfernt, was bedeutet, dass Ihr endgültiges CSS-Bundle so klein wie möglich ist. Tatsächlich liefern die meisten Tailwind-Projekte weniger als 10 KB CSS an den Kunden.

Was denken Sie?

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.