Tailwind CSS biedt een reeks utilities voor het toevoegen van schaduwen aan elementen.

Box Shadows

Gebruik het voorvoegsel shadow- gevolgd door de groottewaarde om box-shadows toe te voegen.

Tekstschaduwen

Tailwind CSS bevat standaard geen text-shadow utilities. Je kunt echter eenvoudig aangepaste text-shadow utilities toevoegen in je Tailwind-configuratiebestand indien nodig.

Opmerking

Raadpleeg de documentatie als je specifieke Tailwind-schaduwen wilt bekijken: Box Shadow.

Voorbeeld

Hier volgt een praktisch voorbeeld van het toepassen van basisopmaak (kleuren, randen, schaduwen) met behulp van de utilities die we hebben behandeld.

Uitleg

1. max-w-sm: Stelt de maximale breedte van het element in op klein formaat (24rem of 384px);
2. mx-auto: Centreert het element horizontaal door auto marges links en rechts toe te passen;
3. p-4: Voegt een opvulling van 1rem (16px) aan alle zijden toe;
4. bg-white: Stelt de achtergrondkleur in op wit;
5. rounded-lg: Past grote afgeronde hoeken toe op het element;
6. shadow-md: Voegt een middelgrote schaduw toe aan het element.

1. text-2xl: Stelt de lettergrootte in op 2xl (1.5rem of 24px);
2. font-bold: Past vetgedrukte letterstijl toe;
3. text-gray-900: Stelt de tekstkleur in op zeer donkergrijs (bijna zwart);
4. mb-2: Voegt een onderste marge van 0.5rem (8px) toe;
5. text-gray-700: Stelt de tekstkleur in op middengrijs;
6. mb-4: Voegt een onderste marge van 1rem (16px) toe.

1. border: Voegt een rand toe rond het element;
2. border-blue-500: Stelt de randkleur in op een tint blauw;
3. rounded-md: Past middelmatig afgeronde hoeken toe op het element;
4. p-4: Voegt een opvulling van 1rem (16px) toe aan alle zijden;
5. bg-blue-50: Stelt de achtergrondkleur in op zeer lichtblauw;
6. text-blue-700: Stelt de tekstkleur in op donkerblauw.

1. mt-4: Voegt een bovenmarge van 1rem (16px) toe;
2. p-4: Voegt een opvulling van 1rem (16px) toe aan alle zijden;
3. bg-green-100: Stelt de achtergrondkleur in op zeer lichtgroen;
4. border: Voegt een rand toe rond het element;
5. border-green-500: Stelt de randkleur in op een tint groen;
6. rounded: Past kleine afgeronde hoeken toe op het element;
7. shadow-sm: Past een kleine schaduw toe op het element;
8. text-green-700: Stelt de tekstkleur in op donkergroen.