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.
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.
Die Vorteile sind:
Die häufigste erste Frage bei tailwind: “Da kann ich auch gleich Inline Styles verwenden!”. Nein, denn:
md:w-16
hover:bg-blue-500
`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>
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;
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: []
}
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/