Warum ich  Tailwind liebe

Max Stoiber schrieb einige interessante Notizen darüber, warum er Tailwind liebt. (Max hat styled-components erstellt, daher hat er ein gewisses Interesse am Thema Styling-Methodologie.) In diesem Beitrag steckt viel großartige Geschichte darüber, wie Tailwind entstanden ist und zu einem wertvollen Werkzeug für Designer und Entwickler gleichermaßen wurde, aber er spricht auch darüber, was das Herzstück des Tailwind-Systems ausmacht und was es so praktisch macht.

Der Schlüssel zur Popularität von Tailwind ist das sorgfältig konstruierte System von Design-Tokens im Kern des Frameworks. Die sorgfältig ausgewählten Beschränkungen des Systems geben Entwicklern genau die richtigen Leitplanken. Sie machen deutlich, ob eine Entscheidung gut oder schlecht ist, indem sie nur diskrete Schritte anbieten.

Er verlinkt auf twin.macro – etwas, von dem ich noch nie gehört hatte – und gibt dann ein Beispiel, das ungefähr so ​​aussieht.

import "twin.macro"

<div tw="text-center md:text-left" />

// ↓↓↓↓↓ turns into ↓↓↓↓↓

import "styled-components/macro"

<div 
  css={{
    textAlign: "center",
    "@media (min-width: 768px)": {
      "textAlign":"left"
    }
  }}
/>

Was hier passiert, ist, dass Sie vordefinierte Klassen verwenden können, genau wie bei Tailwind – Abstände hinzufügen, ein Div rund machen und eine bestimmte Größe geben usw. Was twin.macro tut, ist, Ihnen die Verwendung dieser Klassen zu ermöglichen, aber mit den zusätzlichen Vorteilen von CSS-in-JS. Max schreibt.

Sie erhalten eine vollautomatische kritische CSS-Extraktion und Code-Splitting. Benutzer laden nur genau die Stile, die sie für die angeforderte Seite benötigen – nicht mehr und nicht weniger!

Das gefällt mir irgendwie, Tailwind als Kurzschrift zu verwenden, es mehr als syntaktischen Zucker über CSS zu behandeln, anstatt als Framework. Super interessante Sache.

Direkter Link →