Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Anwenden von Utility-Klassen in HTML | Kernkonzepte und Grundlegende Gestaltung
Tailwind CSS für Webentwicklung

bookAnwenden von Utility-Klassen in HTML

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.

index.html

index.html

copy

Anwenden von Utility-Klassen

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

index.html

index.html

copy

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.
question mark

Wie werden Utility-Klassen in Tailwind CSS auf ein HTML-Element angewendet?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Suggested prompts:

Can you explain what each utility class does in more detail?

How do I combine multiple utility classes for one element?

Can you show an example of how these classes look in the HTML code?

Awesome!

Completion rate improved to 3.57

bookAnwenden von Utility-Klassen in HTML

Swipe um das Menü anzuzeigen

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.

index.html

index.html

copy

Anwenden von Utility-Klassen

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

index.html

index.html

copy

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.
question mark

Wie werden Utility-Klassen in Tailwind CSS auf ein HTML-Element angewendet?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 2
some-alt