{"id":48771,"date":"2022-03-17T13:41:08","date_gmt":"2022-03-17T12:41:08","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=48771&preview=true&preview_id=48771"},"modified":"2023-08-25T12:04:29","modified_gmt":"2023-08-25T11:04:29","slug":"tailwind-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/tailwind-css\/","title":{"rendered":"Wie du mit Tailwind CSS schnell schicke Webseiten entwickeln kannst"},"content":{"rendered":"

Je weiter du als Entwickler kommst, desto wahrscheinlicher ist es, dass du Technologien verwendest, die dir helfen, mehr zu tun und dabei weniger Code zu schreiben. Ein solides Frontend-Framework wie Tailwind CSS<\/span> ist eine M\u00f6glichkeit, das zu erreichen.<\/p>\n

In diesem Artikel lernen wir Tailwind CSS<\/span> kennen – ein CSS-Framework<\/span>, das bei der Erstellung und Gestaltung von Webseiten hilft. Wir erkl\u00e4ren dir zun\u00e4chst, wie du Tailwind CSS<\/span> installierst und in dein Projekt integrierst, sehen uns einige praktische Anwendungen an und erfahren, wie du deine eigenen Stile und Plugins erstellen kannst.<\/p>\n

Aufgeregt? Dann lass uns beginnen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Was ist Tailwind CSS?<\/h2>\n
\"Tailwind
Tailwind CSS.<\/figcaption><\/figure>\n

Tailwind CSS<\/span> ist ein CSS-Framework (Cascading Style Sheets)<\/a> mit vordefinierten Klassen, mit denen du Webseiten direkt in deinem Markup<\/span> erstellen und gestalten kannst. Damit kannst du CSS<\/span> in Form von vordefinierten Klassen in dein HTML<\/span> schreiben.<\/p>\n

Wir definieren, was ein Framework ist und was wir mit „Utility-first CSS<\/span>“ meinen, damit du besser verstehst, worum es bei Tailwind CSS<\/span> geht.<\/p>\n

Was ist ein Framework?<\/h2>\n

Als allgemeiner Programmierbegriff ist ein Framework<\/a> ein Werkzeug, das wiederverwendbare und vorgefertigte Komponenten<\/span> bereitstellt, die auf den Funktionen eines bereits vorhandenen Werkzeugs aufbauen. Der Hauptzweck von Frameworks besteht darin, die Entwicklungsgeschwindigkeit zu erh\u00f6hen, indem weniger Arbeit anf\u00e4llt.<\/p>\n

Nachdem wir nun die Bedeutung eines Frameworks gekl\u00e4rt haben, solltest du verstehen, dass Tailwind CSS<\/span> ein Tool ist, das auf CSS-Funktionen<\/span> aufbaut. Alle Funktionen des Frameworks wurden von CSS-Stilen<\/span> abgeleitet, die als Klassen zusammengestellt wurden.<\/p>\n

Was ist ein Utility-First-CSS-Framework?<\/h2>\n

Wenn wir von Utility-First-CSS<\/span> sprechen, beziehen wir uns auf Klassen in unserem Markup (HTML)<\/a> mit vordefinierten Funktionalit\u00e4ten. Das bedeutet, dass du nur eine Klasse<\/span> schreiben musst, die mit vordefinierten Stilen versehen ist, und diese Stile werden auf das Element angewendet.<\/p>\n

Wenn du mit Vanilla CSS <\/span>(CSS<\/span> ohne Framework oder Bibliothek) arbeitest, gibst du deinem Element zun\u00e4chst einen Klassennamen<\/span> und f\u00fcgst dieser Klasse<\/span> dann verschiedene Eigenschaften und Werte hinzu, die wiederum das Styling auf dein Element anwenden.<\/p>\n

Wir zeigen dir ein Beispiel. Wir erstellen eine Schaltfl\u00e4che mit abgerundeten Ecken und einem Text<\/span>, der „Klick mich“ sagt So wird die Schaltfl\u00e4che aussehen:<\/p>\n

\"Ein
Unser Button.<\/figcaption><\/figure>\n

Wir machen das zuerst mit Vanilla CSS<\/span> und dann mit den Utility-Klassen, die in Tailwind CSS<\/span> verf\u00fcgbar sind.<\/p>\n

Mit Vanilla CSS<\/h3>\n
<button class<\/span>=\"btn\">Click me<\/button><\/code><\/pre>\n
Wir haben den Button-Tags die Klasse<\/span> btn<\/code> gegeben, die mit einem externen Stylesheet gestylt wird. Das hei\u00dft:<\/p>\n
.btn {\n  background-color<\/span>: #000;\n  color<\/span>: #fff;\n  padding: 8px;\n  border: none;\n  border-radius: 4px;\n}<\/code><\/pre>\n
Mit Tailwind CSS<\/h3>\n
<button class<\/span>=\"bg-black<\/span> p-2 rounded\">Click me<\/button><\/code><\/pre>\n
Das alles ist n\u00f6tig, um den gleichen Effekt zu erzielen wie im Beispiel mit Vanilla CSS<\/span>. Es wurde kein externes Stylesheet erstellt, in das du die Stile schreiben musst, weil jeder Klassenname<\/span>, den wir verwendet haben, bereits einen vordefinierten Stil hat.<\/p>\n
Voraussetzungen f\u00fcr die Verwendung von Tailwind CSS<\/h2>\n
Bevor du Tailwind CSS<\/span> verwendest, solltest du einige Voraussetzungen erf\u00fcllen, damit du die Funktionen des Frameworks ohne Schwierigkeiten nutzen kannst. Hier sind ein paar von ihnen:<\/p>\n