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

HTML-Struktur

Beginnen Sie mit einer grundlegenden HTML-Struktur.

Anwenden von Utility-Klassen

Fügen Sie Utility-Klassen zum class-Attribut Ihrer Elemente hinzu, um sie zu stylen.

Erklärung

1. p-4: Fügt Polsterung hinzu;
2. bg-gray-100: Setzt die Hintergrundfarbe auf hellgrau;
3. rounded-lg: Fügt große 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 rund;
4. mx-auto: Zentriert das Bild horizontal.

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

1. mt-4: Fügt einen oberen Rand hinzu;
2. px-4: Fügt horizontalen Abstand hinzu;
3. py-2: Fügt vertikalen Abstand 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 Hover.