Summary  
This chapter explains how to apply Tailwind CSS utility classes with standardized prefixes and shade values to set background colors, text colors, and border colors on elements.  

General domain of usage  
User interface styling for web applications.

# Farben

Tailwind CSS bietet eine breite Palette von Farb-Utilities, die auf Elemente angewendet werden können. Diese Utilities ermöglichen es, Hintergrundfarben, Textfarben und Rahmenfarben schnell festzulegen.

> Hinweis
> 
> Die Zahlen in diesen Klassen stehen für verschiedene Farbabstufungen der Grundfarbe. Diese Zahlen reichen von `50` bis `900`:
> - Niedrigere Zahlen (z. B. `50`): Hellere Farbtöne;
> - Höhere Zahlen (z. B. `900`): Dunklere Farbtöne.

## Hintergrundfarben
Verwendung des Präfixes `bg-` gefolgt vom Farbnamen und der Abstufung.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QmFzaWMgU3R5bGluZyAtIENvbG9ycyAtIEV4YW1wbGUgMTwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJiZy1yZWQtNTAwIHAtNCI+QmFja2dyb3VuZCBDb2xvciBSZWQ8L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJnLWdyZWVuLTUwMCBwLTQiPkJhY2tncm91bmQgQ29sb3IgR3JlZW48L2Rpdj4KICAgIDxkaXYgY2xhc3M9ImJnLWJsdWUtNTAwIHAtNCI+QmFja2dyb3VuZCBDb2xvciBCbHVlPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

## Textfarben
Verwendung des Präfixes `text-` gefolgt vom Farbnamen und der Schattierung.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QmFzaWMgU3R5bGluZyAtIENvbG9ycyAtIEV4YW1wbGUgMjwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8cCBjbGFzcz0idGV4dC1yZWQtNTAwIj5UZXh0IENvbG9yIFJlZDwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LWdyZWVuLTUwMCI+VGV4dCBDb2xvciBHcmVlbjwvcD4KICAgIDxwIGNsYXNzPSJ0ZXh0LWJsdWUtNTAwIj5UZXh0IENvbG9yIEJsdWU8L3A+CiAgPC9ib2R5Pgo8L2h0bWw+

## Rahmenfarben
Verwendung des Präfixes `border-` gefolgt vom Farbnamen und der Schattierung.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+QmFzaWMgU3R5bGluZyAtIENvbG9ycyAtIEV4YW1wbGUgMzwvdGl0bGU+CiAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4udGFpbHdpbmRjc3MuY29tIj48L3NjcmlwdD4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXIgYm9yZGVyLXJlZC01MDAgcC00Ij5Cb3JkZXIgQ29sb3IgUmVkPC9kaXY+CiAgICA8ZGl2IGNsYXNzPSJib3JkZXIgYm9yZGVyLWdyZWVuLTUwMCBwLTQiPkJvcmRlciBDb2xvciBHcmVlbjwvZGl2PgogICAgPGRpdiBjbGFzcz0iYm9yZGVyIGJvcmRlci1ibHVlLTUwMCBwLTQiPkJvcmRlciBDb2xvciBCbHVlPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

> Hinweis
>
> Eine vollständige Übersicht aller verfügbaren Farben ist in der Tailwind-Dokumentation unten zu finden.
> - <a href="https://tailwindcss.com/docs/background-color" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Hintergrundfarben</a>;
> - <a href="https://tailwindcss.com/docs/text-color" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Textfarben</a>;
> - <a href="https://tailwindcss.com/docs/border-color" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" ><svg width="1em" height="1em" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M17.289 17.305v0c-1.754 1.754-4.597 1.754-6.351 0l-7.76-7.759c-1.755-1.755-1.755-4.601 0-6.356v0c1.753-1.753 4.595-1.756 6.351-0.005l6.208 6.187"></path><path fill="none" stroke="#098f67" style="stroke: var(--color1, #098f67)" stroke-linejoin="miter" stroke-linecap="round" stroke-miterlimit="4" stroke-width="2.4156" d="M12.504 13.97v0c1.754-1.754 4.597-1.754 6.351 0l7.762 7.762c1.754 1.754 1.754 4.597 0 6.351v0c-1.754 1.754-4.597 1.754-6.351 0l-5.953-5.953"></path></svg> Rahmenfarben</a>.

Welche Klasse wird verwendet, um eine Hintergrundfarbe auf Blau zu setzen?

Welche Utility-Klasse wird verwendet, um die Textfarbe auf Grau zu setzen?

Effizientes Gestalten von Websites mit Tailwind CSS, einem Utility-First-Framework für schnelle UI-Entwicklung. Einführung in die Einrichtung von Tailwind und die Anwendung von Utility-Klassen für Farben, Typografie, Rahmen und Schatten. Gestaltung und Design grundlegender Komponenten wie Buttons, Karten und Formulare. Beherrschung von Layout-Techniken mit Abstands-, Flexbox- und Grid-Utilities. Entwicklung responsiver Designs und Anpassung von Tailwind an projektspezifische Anforderungen.

Lernen Sie Tailwind CSS kennen, ein Utility-First-Framework, das für seine Flexibilität und Effizienz im Webdesign bekannt ist. Entdecken Sie die wichtigsten Vorteile und die Utility-First-Philosophie. Außerdem werden die einfachen Installationsmethoden über CDN oder npm/yarn vorgestellt.

Entdecken Sie die grundlegenden Elemente von Tailwind CSS, einschließlich des Verständnisses von Utility-Klassen und deren Anwendung auf HTML-Elemente. Vertiefen Sie sich in wesentliche Gestaltungstechniken wie das Festlegen von Farben, Rändern, Schatten und Typografie-Utilities.

Vertiefung in praktische Anwendungen mit Fokus auf die Erstellung und Gestaltung von Buttons, Formularen und Karten.
Durch praxisnahe Herausforderungen wird das Erstellen dieser grundlegenden UI-Komponenten anhand von Beispielen aus der realen Welt vermittelt und die Fähigkeiten werden erweitert.

Erkunden Sie die grundlegenden Abstands-Utilities von Tailwind CSS, einschließlich der Anwendung von Margin und Padding auf Ihre Elemente. Außerdem lernen Sie, Flexbox-Utilities zu nutzen, um das Layout mit Anzeigeeinstellungen, Flex-Richtung sowie horizontaler und vertikaler Ausrichtung zu steuern. Zusätzlich befassen Sie sich mit Grid-Utilities, um einfache und dennoch leistungsstarke Grid-Layouts zu erstellen und die Einrichtung von Grid-Containern und -Elementen zu beherrschen.

Erfahren Sie, wie Sie Tailwind CSS an die Designanforderungen Ihres Projekts anpassen und flexible Layouts für verschiedene Geräte erstellen.

Verwendung von Farben in Tailwind CSS

Farben

Hintergrundfarben

Textfarben

Rahmenfarben

1. Welche Klasse wird verwendet, um eine Hintergrundfarbe auf Blau zu setzen?

2. Welche Utility-Klasse wird verwendet, um die Textfarbe auf Grau zu setzen?