Grundlegendes Styling - Schatten

Tailwind CSS bietet eine Reihe von Utilities, um Schatten zu Elementen hinzuzufügen.

Box Shadows

Verwenden Sie das Präfix shadow- gefolgt von dem Größenwert, um Box-Schatten hinzuzufügen.

Textschatten

Tailwind CSS enthält standardmäßig keine text-shadow-Utilities. Sie können jedoch bei Bedarf problemlos benutzerdefinierte text-shadow-Utilities in Ihrer Tailwind-Konfigurationsdatei hinzufügen.

Hinweis

Wenn Sie sich mit spezifischen Tailwind-Schatten befassen müssen, konsultieren Sie bitte die Dokumentation: Box Shadow.

Beispiel

Hier ist ein praktisches Beispiel für die Anwendung von grundlegenden Stilen (Farben, Ränder, Schatten) unter Verwendung der Dienstprogramme, die wir gelernt haben.

Erklärung

1. max-w-sm: Setzt die maximale Breite des Elements auf kleine Größe (24rem oder 384px);
2. mx-auto: Zentriert das Element horizontal, indem auto-Ränder links und rechts angewendet werden;
3. p-4: Fügt auf allen Seiten einen Abstand von 1rem (16px) hinzu;
4. bg-white: Setzt die Hintergrundfarbe auf weiß;
5. rounded-lg: Wendet große abgerundete Ecken auf das Element an;
6. shadow-md: Wendet einen mittleren Box-Schatten auf das Element an.

1. text-2xl: Setzt die Schriftgröße auf 2xl (1.5rem oder 24px);
2. font-bold: Wendet fettgedruckte Schrift an;
3. text-gray-900: Setzt die Textfarbe auf ein sehr dunkles Grau (nahezu schwarz);
4. mb-2: Fügt einen unteren Rand von 0.5rem (8px) hinzu;
5. text-gray-700: Setzt die Textfarbe auf ein mittleres Grau;
6. mb-4: Fügt einen unteren Rand von 1rem (16px) hinzu.

1. border: Fügt einen Rahmen um das Element hinzu;
2. border-blue-500: Setzt die Rahmenfarbe auf einen Blauton;
3. rounded-md: Wendet mittel abgerundete Ecken auf das Element an;
4. p-4: Fügt auf allen Seiten einen Abstand von 1rem (16px) hinzu;
5. bg-blue-50: Setzt die Hintergrundfarbe auf ein sehr helles Blau;
6. text-blue-700: Setzt die Textfarbe auf ein dunkles Blau.

1. mt-4: Fügt einen oberen Rand von 1rem (16px) hinzu;
2. p-4: Fügt auf allen Seiten einen Abstand von 1rem (16px) hinzu;
3. bg-green-100: Setzt die Hintergrundfarbe auf ein sehr helles Grün;
4. border: Fügt einen Rahmen um das Element hinzu;
5. border-green-500: Setzt die Rahmenfarbe auf einen Grünton;
6. rounded: Wendet kleine abgerundete Ecken auf das Element an;
7. shadow-sm: Wendet einen kleinen Schatten auf das Element an;
8. text-green-700: Setzt die Textfarbe auf ein dunkles Grün.