Tailwind CSS

Auch abgetörnt von Bootstrap, wo jedes Design gleich aussieht? Mit tailwind ist das zu Ende: Die neue CSS-Bibliothek regt den Entwickler an, über Design nachzudenken und bessere Designs zu entwerfen. Wir zeigen, wie’s geht.

Utility first

Tailwind nennt sich utility first, weil es viele CSS Klassen gibt, die die visuelle Funktion wiedergeben (bg-blue-100). Dagegen gibt es keine funktionalen Komponenten (wie Buttons etc) mehr.

Tailwind

Die Vorteile sind:

Warum dann keine Inline Styles?

Die häufigste erste Frage bei tailwind: “Da kann ich auch gleich Inline Styles verwenden!”. Nein, denn:

Aber wie sorge ich für Design-Konsistenz?

Die zweite häufige Frage: Aber wie kann ich denn sicherstellen, dass alle Buttons auf meiner Seite gleich aussehen, wenn an jedem Button einzeln die Styles stehen.

Zuerst ist dazu zu sagen, dass visualle Klassen dazu anregen, individuellere Designs zu haben, die dem Anwendungsfall angepasster sind.

Aber natürlich gibt es auch in tailwind ein Design-System, und zwar mit der @apply-Direktive:

<button class="btn">Button</button>

<style>
.btn {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}
</style>

Getting started

Tailwind ist ein PostCSS-Plugin und kann daher in einem klassischen webpack-Umfeld einfach wie gewohnt installiert werden:

npm install tailwindcss

und dann im CSS eingebunden:

@tailwind base;

@tailwind components;

@tailwind utilities;

Theming

In tailwind soll nicht wie bei Bootstrap immer alles gleich aussehen, daher ist Theming-Support eingebaut:

npx tailwindcss init

erzeugt eine leere Konfiguration, die dann (im Beispiel um eine neue Farbe) erweitert werden kann:

module.exports = {
  purge: [],
  theme: {

    extend: {
      colors: { primary: '#9cdbff' }
    }
  }
  variants: {},
  plugins: []
}

purgecss

Falls jemand Bedenken hat, dass sehr viele CSS-Klassen bei tailwind in seinen Production-Build wandern: Im typischen Setup nutzt tailwind purgecss, damit nur der wirklich genutzte CSS Code eingebunden wird.

Mehr zu tailwind hier: https://tailwindcss.com/