Um Utility-Klassen in Tailwind CSS zu verwenden, fügen Sie diese dem class-Attribut Ihrer HTML-Elemente hinzu. Jede Klasse entspricht einer bestimmten CSS-Regel, was es einfach macht, Ihre Styles direkt im HTML zu verstehen und zu verwalten.

HTML-Struktur

Beginnen Sie mit einer grundlegenden HTML-Struktur.

Anwenden von Utility-Klassen

Hinzufügen von Utility-Klassen zum class-Attribut Ihrer Elemente zur Gestaltung.

Erklärung

1. p-4: Fügt Innenabstand hinzu;
2. bg-gray-100: Setzt die Hintergrundfarbe auf Hellgrau;
3. rounded-lg: Fügt stark abgerundete Ecken hinzu;
4. shadow-md: Fügt einen mittleren Schatten hinzu.

1. h-16: Setzt die Höhe;
2. w-16: Setzt die Breite;
3. rounded-full: Macht das Bild kreisförmig;
4. mx-auto: Zentriert das Bild horizontal.

1. text-center: Zentriert den Text;
2. mt-4: Fügt einen oberen Außenabstand hinzu;
3. text-lg: Legt die Schriftgröße fest;
4. font-semibold: Macht den Text halbfett;
5. text-gray-500: Setzt die Textfarbe auf Grau.

1. mt-4: Fügt einen oberen Außenabstand hinzu;
2. px-4: Fügt horizontalen Innenabstand hinzu;
3. py-2: Fügt vertikalen Innenabstand hinzu;
4. bg-blue-500: Setzt die Hintergrundfarbe auf Blau;
5. text-white: Setzt die Textfarbe auf Weiß;
6. rounded: Fügt kleine abgerundete Ecken hinzu;
7. hover:bg-blue-700: Ändert die Hintergrundfarbe beim Überfahren mit der Maus.