CSS-Frameworks haben die Art und Weise, wie Entwickler die Webentwicklung angehen, verändert, indem sie vorgefertigte Komponenten und Stile bereitstellen. Viele Frameworks kommen jedoch mit festgelegten Designs und aufgeblähten Stylesheets, die die Anpassung einschränken.

Tailwind CSS verfolgt einen anderen Ansatz. Als CSS-Framework, das auf Utility-First basiert, bietet es niedrigstufige Utility-Klassen, die es Entwicklern ermöglichen, benutzerdefinierte Designs zu erstellen, ohne durch vordefinierte Komponenten eingeschränkt zu sein.

Mit über 675.375 Websites, die Tailwind CSS verwenden, und über 8,61 Millionen abhängigen Repositories, ist Tailwind mehr als nur ein weiteres CSS-Framework geworden.

In diesem Artikel werden wir die Konzepte von Tailwind CSS, den Einrichtungsprozess und die praktische Anwendung durchgehen, damit Sie anfangen können, Ihre schönen benutzerdefinierten Benutzeroberflächen zu bauen, ohne CSS lernen zu müssen.

Lasst uns anfangen!

Was ist Tailwind CSS?

Tailwind CSS ist ein hochgradig anpassbares, niedrigstufiges CSS-Framework, das einen Satz von Utility-Klassen bietet, um schnell benutzerdefinierte Benutzeroberflächen zu erstellen. Es wurde erstmals 2017 von Adam Wathan entwickelt und veröffentlicht.

Seitdem hat Tailwind eine aufsteigende Entwicklung bei der Erstellung von Websites mit der Tailwind-Bibliothek erlebt.

Obwohl das Wachstum laut den BuiltWith-Diagrammen derzeit zu verlangsamen scheint, wird das Framework regelmäßig mit neuen Funktionen, Klassen und mehr aktualisiert.

Laut BuiltWiths Technologie-Stack-Daten, verwenden allein in den USA über 100.000 Websites Tailwind zur Erstellung ihrer Benutzeroberflächen, zusammen mit dem Vereinigten Königreich, Indonesien, Deutschland und anderen Ländern, die zu den Top 10 Nutzern dieser Bibliothek gehören.

Die Kernphilosophie hinter Tailwind CSS besteht darin, Entwicklern einen Satz von Bausteinen anstatt vorgefertigter Komponenten zur Verfügung zu stellen. Diese Bausteine sind kleine, zweckgebundene Utility-Klassen, die kombiniert werden können, um komplexe und responsive Layouts zu erstellen.

Dieser Ansatz ermöglicht größere Flexibilität und Kontrolle über das Design, da Sie jeden Aspekt Ihrer Benutzeroberfläche anpassen können, ohne durch die vorgefertigten Stile des Frameworks eingeschränkt zu sein.

Was macht Tailwind CSS anders?

Traditionell schreiben Entwickler beim Arbeiten mit CSS benutzerdefinierte Klassen in separaten Stylesheets, um ihre HTML-Elemente zu gestalten. Dieser Ansatz kann zu großen CSS-Dateien führen und das Pflegen und Aktualisieren von Stilen über ein Projekt hinweg erschweren.

Tailwind bietet einen umfassenden Satz an Utility-Klassen, die direkt auf HTML-Elemente angewendet werden können. Diese Klassen sind hochgradig komponierbar, was Entwicklern ermöglicht, komplexe, benutzerdefinierte Designs zu erstellen, ohne eine einzige Zeile benutzerdefinierten CSS zu schreiben.

Beispielsweise können Sie anstatt einer benutzerdefinierten CSS-Klasse zum Stylen eines Buttons, vordefinierte Klassen von Tailwind wie folgt verwenden:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Knopf
</button>

Dieser Ansatz hat mehrere Vorteile:

1. Schnellere Entwicklung: Die vordefinierten Klassen helfen Entwicklern dabei, schnell Designs zu erstellen und zu iterieren, ohne ständig zwischen HTML und CSS-Dateien wechseln zu müssen.
2. Konsistente Gestaltung: Tailwind bietet einen standardisierten Satz an Klassen, der hilft, die Konsistenz im Design über ein Projekt hinweg zu wahren.
3. Kleinere CSS-Dateien: Da Stile direkt im HTML angewendet werden, ist keine Notwendigkeit für große, benutzerdefinierte CSS-Dateien.
4. Einfachere Wartung: Mit im HTML definierten Stilen ist es einfacher zu sehen, wie Änderungen ein spezifisches Element beeinflussen, ohne durch separate CSS-Dateien zu suchen.
5. Bessere Leistung: Viele moderne Styling-Systeme wie Emotion oder Styled Components verlassen sich auf Javascript (normalerweise zur Laufzeit, langsamere Leistung), um Ihr CSS zu rendern. Tailwind ist letztendlich nur CSS.

Tailwind hat mich zu einem kompletten Stack-Entwickler gemacht 🤝”
— Boris Lepikhin

Erste Schritte mit Tailwind CSS

Bevor wir zu Beispielen übergehen, richten wir ein grundlegendes Projekt mit Tailwind CSS ein. Wir gehen davon aus, dass Sie etwas Vertrautheit mit HTML und CSS haben. Außerdem müssen Sie npm auf Ihrem System installiert haben. Sobald Sie fertig sind, können Sie loslegen!

Erstellen Sie ein neues Verzeichnis für Ihr Projekt und navigieren Sie hinein:

mkdir mein-tailwind-projekt
cd mein-tailwind-projekt

Initialisiere ein neues npm-Projekt und installiere Tailwind CSS:

npm init -y
npm install -D tailwindcss

Erstellen Sie eine tailwind.config.js-Datei:

npx tailwindcss init

Erstellen Sie eine input.css-Datei und fügen Sie Folgendes hinzu:

@tailwind base;
@tailwind components;
@tailwind utilities;

Aktualisieren Sie Ihre tailwind.config.js-Datei, um Ihre input.css zu verarbeiten:

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Erstellen Sie eine index.html-Datei in einem src-Verzeichnis und fügen Sie Folgendes hinzu:

<!DOCTYPE html>
<html>
  <head>
    <link href="/dist/output.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-3xl font-bold text-center mt-4">Willkommen bei Tailwind CSS!</h1>
  </body>
</html>

Erstellen Sie Ihr CSS:

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

Wenn Sie jetzt index.html in Ihrem Browser öffnen, sollten Sie eine große, fett gedruckte Überschrift sehen, die sagt Willkommen bei Tailwind CSS!

Herzlichen Glückwunsch, Sie haben Ihr erstes Tailwind-Projekt eingerichtet!

Tailwind CSS Hilfsklassen

Tailwind CSS bietet eine breite Palette von Utility-Klassen, die verschiedene Aspekte des Stylings abdecken, wie Layout, Abstand, Typografie, Farben und mehr. Diese Klassen folgen einer Benennungskonvention, die es intuitiv macht, ihren Zweck zu verstehen.

Lassen Sie uns einige häufig verwendete Utility-Klassen in Tailwind CSS erkunden.

Tailwind Layout-Klassen

• flex: Wendet einen Flex-Container an.
• grid: Wendet einen Grid-Container an.
• block: Zeigt ein Element als Block-Level-Element an.
• inline: Zeigt ein Element als Inline-Level-Element an.

Beispiel:

<div class="flex">
  <div>Artikel 1</div>
  <div>Artikel 2</div>
</div>

Tailwind Abstandsklassen

• m-{size}: Wendet einen Abstand auf allen Seiten an.
• p-{size}: Wendet Polsterung auf allen Seiten an.
• mx-{size}: Wendet einen Abstand links und rechts an.
• py-{size}: Wendet Polsterung oben und unten an.

Beispiel:

<div class="m-4 p-2">
  Inhalt mit Rand und Abstand
</div>

Tailwind Typografie-Klassen

• text-{size}: Legt die Schriftgröße fest.
• font-{weight}: Legt das Schriftgewicht fest.
• text-{color}: Legt die Textfarbe fest.
• uppercase, lowercase, capitalize: Verändert die Groß- und Kleinschreibung des Textes.

Beispiel:

<p class="text-lg font-bold text-blue-500 uppercase">
  Stilisierter Text
</p>

Tailwind-Farben

Tailwind CSS bietet eine standardmäßige Farbpalette, die angepasst werden kann. Farben werden durch eine Kombination aus dem Farbnamen und dem Farbton definiert.

• bg-{color}-{shade}: Legt die Hintergrundfarbe fest.
• text-{color}-{shade}: Legt die Textfarbe fest.
• border-{color}-{shade}: Legt die Randfarbe fest.

Beispiel:

<button class="bg-blue-500 text-white border-2 border-blue-700">
  Schaltfläche
</button>

Tailwind-Klassen für responsives Design

Tailwind erleichtert die Erstellung responsiver Designs, indem es responsive Varianten für die meisten seiner Utility-Klassen bietet. Diese Varianten ermöglichen es Ihnen, unterschiedliche Stile für verschiedene Bildschirmgrößen festzulegen.

Tailwind verwendet einen Mobile-First-Ansatz, bei dem die Basisstile auf alle Bildschirmgrößen angewendet werden und dann größere Bildschirmgrößen mit responsiven Präfixen angesprochen werden:

• sm: Wendet Stile auf kleine Bildschirme und größer (640px und mehr) an.
• md: Wendet Stile auf mittlere Bildschirme und größer (768px und mehr) an.
• lg: Wendet Stile auf große Bildschirme und größer (1024px und mehr) an.
• xl: Wendet Stile auf sehr große Bildschirme und größer (1280px und mehr) an.
• 2xl: Wendet Stile auf extra große Bildschirme und größer (1536px und mehr) an.

Um diese responsiven Varianten zu verwenden, fügen Sie einfach die gewünschte Bildschirmgröße vor der Utility-Klasse hinzu:

<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500">
  <!-- Inhalt -->
</div>

In diesem Beispiel wird das div auf kleinen Bildschirmen einen blauen Hintergrund haben, auf mittleren Bildschirmen einen grünen Hintergrund und auf großen Bildschirmen einen roten Hintergrund.

Sie können auch responsive Varianten verwenden, um das Layout Ihrer Elemente zu steuern:

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/2 lg:w-1/3">Spalte 1</div>
  <div class="w-full md:w-1/2 lg:w-1/3">Spalte 2</div>
  <div class="w-full md:w-1/2 lg:w-1/3">Spalte 3</div>
</div>

Hier werden die Spalten auf kleinen Bildschirmen vertikal gestapelt, auf mittleren Bildschirmen in zwei Spalten und auf großen Bildschirmen in drei Spalten angezeigt.

Anpassen der Standardklassen von Tailwind CSS

Eine der Stärken von Tailwind CSS sind seine Anpassungsmöglichkeiten. Sie können die Standardkonfiguration leicht an die Designanforderungen Ihres Projekts anpassen. Die Datei tailwind.config.js ermöglicht es Ihnen, die Standardeinstellungen zu erweitern oder zu überschreiben.

Hier sind einige häufige Anpassungsoptionen. Sie können jeden Teil von Tailwind vollständig anpassen, daher ist dies keineswegs eine erschöpfende Liste.

Farben

Tailwind CSS bietet standardmäßig eine reichhaltige Farbpalette, aber Sie können diese leicht an das Branding oder die Designanforderungen Ihres Projekts anpassen. Die Datei tailwind.config.js ermöglicht es Ihnen, die Standardfarbpalette zu erweitern oder zu überschreiben. Um benutzerdefinierte Farben hinzuzufügen, können Sie die Erweiterungseigenschaft innerhalb des Farbobjekts verwenden:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#ff5a5f',
        'brand-secondary': '#484848',
        'brand-accent': '#ffcc00',
      },
    },
  },
}

In diesem Beispiel haben wir drei benutzerdefinierte Farben hinzugefügt: brand-primary, brand-secondary und brand-accent.

Diese Farben können jetzt mit Hilfsklassen wie bg-brand-primary, text-brand-secondary, border-brand-accent usw. verwendet werden. Sie können auch vorhandene Farbtöne ändern oder neue Töne zur Standardfarbpalette hinzufügen wie folgt:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          '100': '#e6f0ff',
          '200': '#c3d9ff',
          '300': '#a1c2ff',
          '400': '#7eabff',
          … und so weiter …
        },
      },
    },
  },
}

Schriftfamilie

Tailwind CSS verwendet eine Standard-Schriftartenfamilie, aber ähnlich wie bei Farben, können Sie diese Standards ändern, um sie an den Typografiestil Ihres Projekts anzupassen.

In der tailwind.config.js Datei können Sie die Standard-Schriftfamilie erweitern oder ersetzen. Um benutzerdefinierte Schriftfamilien hinzuzufügen, verwenden Sie die Erweiterungseigenschaft innerhalb des fontFamily Objekts:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Poppins', 'sans-serif'],
        serif: ['Merriweather', 'serif'],
        mono: ['Fira Code', 'monospace'],
      },
    },
  },
}

Sie können auch die Standard-Schriftart vollständig ersetzen, indem Sie die Erweiterungseigenschaft weglassen:

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      'body': ['Open Sans', 'sans-serif'],
      'heading': ['Montserrat', 'sans-serif'],
    },
  },
}

Responsive Breakpoints

Tailwind CSS bietet standardmäßig ein responsives Designsystem, aber Sie können es weiter an die spezifischen Breakpoints und responsiven Anforderungen Ihres Projekts anpassen.

Durch das Ändern des Screens-Objekts in der Datei tailwind.config.js können Sie benutzerdefinierte Breakpoints definieren und unterschiedliche Stile basierend auf Bildschirmgrößen anwenden.

Zum Beispiel nehmen wir an, Sie haben einen einzigartigen Breakpoint bei 1440px, bei dem Sie spezifische Stile anwenden möchten:

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'xs': '480px',
      'sm': '640px',
      'md': '768px',
      'lg': '1024px',
      'xl': '1440px',
    },
  },
}

Mit diesem benutzerdefinierten Breakpoint können Sie responsive Utility-Klassen wie xl:text-lg, xl:flex, xl:w-1/2 usw. verwenden, um Stile speziell für Bildschirme breiter als 1440px anzuwenden.

Abstand

Tailwind CSS bietet einen umfassenden Satz an Abstandswerten für Ränder, Polsterungen und andere abstandsbezogene Hilfsmittel. Sie können diese Werte anpassen, um sie den Layoutanforderungen Ihres Projekts anzupassen. Um benutzerdefinierte Abstandswerte hinzuzufügen, verwenden Sie die Erweiterungseigenschaft innerhalb des Abstandsobjekts:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      },
    },
  },
}

Integration von Drittanbieter-Bibliotheken

Tailwind CSS integriert sich mit beliebten frontend-Bibliotheken und Frameworks wie React, Vue und Angular. Wenn Sie mit diesen Bibliotheken arbeiten, können Sie die Utility-Klassen von Tailwind nutzen, um Ihre Komponenten zu stylen und konsistente sowie wartbare Benutzeroberflächen zu erstellen. Zum Beispiel können Sie in einer React-Komponente die Utility-Klassen von Tailwind direkt auf die JSX-Elemente anwenden:

import React from 'react';

const Card = () => {
  return (
    <div className="bg-white shadow-md rounded-lg p-6">
      <h2 className="text-2xl font-bold mb-4">Kartentitel</h2>
      <p className="text-gray-600">Karteninhalt kommt hier ...</p>
    </div>
  );
};

export default Card;

Dieser Multi-Framework-Ansatz macht es wirklich einfach, das Beste aus allen Welten zusammenzubringen und Ihnen dabei zu helfen, mit fast keinem Aufwand eine schöne App zu erstellen.

Erstellen einer einfachen Anwendung in Tailwind CSS

Nehmen wir an, Sie erstellen eine einfache Landingpage für eine fiktive Online-Kursplattform namens LearnHub, wobei Sie Tailwind verwenden, um die gesamte Seite zu gestalten.

Schritt 1: Einrichten der HTML-Struktur

Zuerst erstellen wir die grundlegende HTML-Struktur für unsere Landingpage:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="output.css" rel="stylesheet">
  <title>LearnHub - Online-Kursplattform</title>
</head>
<body>
  <header>
    <!-- Navigationsmenü wird hier platziert -->
  </header>

  <main>
    <!-- Hauptinhalt wird hier platziert -->
  </main>

  <footer>
    <!-- Fußzeileninhalt wird hier platziert -->
  </footer>
</body>
</html>

In diesem Schritt haben wir die grundlegende Struktur unseres HTML-Dokuments eingerichtet. Wir haben den <head> Abschnitt, in dem wir die notwendigen Meta-Tags einbinden und auf unsere CSS-Datei (output.css) verlinken. Im <body> befinden sich die <header>, <main> und <footer> Abschnitte, in denen wir unseren Inhalt hinzufügen werden.

Schritt 2: Erstellen des Navigationsmenüs

Jetzt fügen wir ein einfaches Navigationsmenü zum <header> Abschnitt mit Tailwind CSS Utility-Klassen hinzu:

<header class="bg-blue-600 text-white py-4">
  <nav class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-2xl font-bold">LearnHub</a>
    <ul class="flex space-x-4">
      <li><a href="#" class="hover:text-blue-200">Kurse</a></li>
      <li><a href="#" class="hover:text-blue-200">Preise</a></li>
      <li><a href="#" class="hover:text-blue-200">Über</a></li>
    </ul>
  </nav>
</header>

Hier ist, was jede Klasse macht:

• bg-blue-600: Setzt die Hintergrundfarbe der Kopfzeile auf einen Blauton.
• text-white: Setzt die Textfarbe auf Weiß.
• py-4: Fügt oben und unten an der Kopfzeile Polsterung hinzu.
• container mx-auto: Zentriert das Navigationsmenü horizontal.
• flex justify-between items-center: Verwendet Flexbox, um das Logo und die Menüelemente gleichmäßig zu verteilen und vertikal auszurichten.
• text-2xl font-bold: Macht den Logo-Text größer und fett.
• flex space-x-4: Fügt mit Flexbox Abstand zwischen den Menüelementen hinzu.
• hover:text-blue-200: Ändert die Textfarbe in einen helleren Blauton, wenn man mit der Maus über die Menüelemente fährt.

Schritt 3: Hinzufügen des Hauptinhalts

Lassen Sie uns einige Inhalte zum <main> Abschnitt unserer Landingpage hinzufügen:

<main class="container mx-auto mt-8">
  <section class="bg-gray-100 rounded-lg p-6">
    <h1 class="text-3xl font-bold mb-4">Willkommen bei LearnHub</h1>
    <p class="text-gray-700 mb-6">Entdecke eine Welt des Wissens mit unseren Online-Kursen.</p>
    <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Jetzt lernen</a>
  </section>

  <section class="mt-8">
    <h2 class="text-2xl font-bold mb-4">Empfohlene Kurse</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <!-- Die Kurskarten werden hier eingefügt -->
    </div>
  </section>
</main>

Hier ist, was jede Klasse macht:

• container mx-auto: Zentriert den Hauptinhalt horizontal.
• mt-8: Fügt einen oberen Rand zum Hauptinhalt hinzu.
• bg-gray-100 rounded-lg p-6: Fügt einen hellgrauen Hintergrund hinzu, rundet die Ecken und fügt Polsterung zum Willkommensbereich hinzu.
• text-3xl font-bold mb-4: Macht den Überschriftentext größer, fett und fügt unten einen Rand hinzu.
• text-gray-700 mb-6: Setzt die Textfarbe auf ein dunkleres Grau und fügt unten einen Rand für den Absatz hinzu.
• bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700: Gestaltet den Jetzt starten Knopf mit einem blauen Hintergrund, weißem Text, Polsterung, abgerundeten Ecken und einem dunkleren blauen Hintergrund beim Darüberfahren.
• text-2xl font-bold mb-4: Macht die Überschrift Ausgewählte Kurse größer, fett und fügt unten einen Rand hinzu.
• grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4: Erstellt ein responsives Rasterlayout für die Kurskarten. Es zeigt eine Spalte auf kleinen Bildschirmen, zwei Spalten auf mittleren Bildschirmen und drei Spalten auf großen Bildschirmen, mit einem Abstand zwischen den Karten.

Wenn Sie den Header und den Hauptcode zusammenfügen, sollten Sie die folgende Ausgabe haben:

Schritt 4: Hinzufügen des Fußbereichs

Zum Schluss fügen wir unserer Landingpage einen einfachen Footer hinzu:

<footer class="bg-gray-800 text-white py-4 mt-8">
  <div class="container mx-auto text-center">
    <p>&copy; 2023 LearnHub. Alle Rechte vorbehalten.</p>
  </div>
</footer>

Hier ist, was jede Klasse macht:

• bg-gray-800 text-white: Setzt die Hintergrundfarbe des Footers auf dunkelgrau und die Textfarbe auf weiß.
• py-4: Fügt dem Footer oben und unten Polsterung hinzu.
• mt-8: Fügt dem Footer oben einen Rand hinzu.
• container mx-auto: Zentriert den Inhalt des Footers horizontal.
• text-center: Zentriert den Text innerhalb des Footers.

Alles zusammenfügen

Hier ist der fertige Code zusammengestellt:

Willkommen bei LearnHub

Entdecke eine Welt des Wissens mit unseren Online-Kursen.

Jetzt lernen

Empfohlene Kurse

Um den Benutzern die Ausgabe anzuzeigen, müssen Sie Tailwind CSS ordnungsgemäß in Ihrem Projekt eingerichtet haben. Stellen Sie sicher, dass Sie die zuvor erwähnten Installationsschritte befolgt haben, einschließlich der Erstellung der tailwind.config.js Datei und der Verarbeitung Ihres CSS mit Tailwind.

Sobald Sie Tailwind CSS eingerichtet haben, können Sie diesen Code in einer HTML-Datei speichern (z. B. index.html) und ihn in einem Webbrowser öffnen. Der Browser wird die Landingpage mit den angewandten Stilen mithilfe von Tailwind CSS Utility-Klassen rendern. Wenn Sie einfach Tailwind testen möchten, können Sie immer Tailwind Play verwenden, ein praktisches kleines Tool von Tailwind, wo Sie mit den verschiedenen Klassen spielen können.

Und da haben Sie es! Wir haben eine einfache Landingpage für unsere fiktive Online-Kursplattform mit Hilfe von Tailwind CSS Utility-Klassen erstellt.

Wo geht es von hier aus weiter?

Jetzt, da Sie die Kraft und Flexibilität von Tailwind CSS gesehen haben, wissen Sie, dass die Möglichkeiten hier endlos sind. Seine flexible und anpassbare Natur kann Ihnen helfen, alles von einfachen Landingpages bis hin zu komplexen Webanwendungen zu erstellen, während ein sauberes und konsistentes Design beibehalten wird.

Hier sind einige Ideen, um zu beginnen:

• Erstelle eine Portfolio-Website: Zeige deine Fähigkeiten und Projekte mit einem atemberaubenden Portfolio.
• Erstelle einen Blog: Teile deine Gedanken und Ideen mit der Welt mit einem schönen und funktionalen Blog, der mit Tailwind gestaltet wurde.
• Entwickle eine Webanwendung: Tailwind CSS eignet sich perfekt für die Erstellung von Benutzeroberflächen für Webanwendungen aller Art.

Unabhängig davon, was Sie erstellen, kann Tailwind CSS Ihnen helfen, eine atemberaubende und gut funktionierende Website zu erstellen.

Und wenn es darum geht, Ihre Kreation zu hosten, sollten Sie eine zuverlässige und skalierbare Lösung wie DreamHosts VPS-Dienste in Betracht ziehen, um sicherzustellen, dass Ihre Website reibungslos und effizient läuft.

Beginnen Sie damit, schöne Benutzeroberflächen mit minimalen CSS-Kenntnissen zu erstellen!