Utilityclasses Toepassen in HTML

Om utility classes in Tailwind CSS te gebruiken, voeg je deze toe aan het class-attribuut van je HTML-elementen. Elke klasse komt overeen met een specifieke CSS-regel, waardoor het eenvoudig is om je stijlen direct in je HTML te begrijpen en te beheren.

HTML-structuur

Begin met een basis HTML-structuur.

Hulpprogrammaklassen toepassen

Hulpprogrammaklassen toevoegen aan het class-attribuut van uw elementen om deze te stijlen.

Uitleg

1. p-4: Voegt opvulling toe;
2. bg-gray-100: Stelt de achtergrondkleur in op lichtgrijs;
3. rounded-lg: Voegt grote afgeronde hoeken toe;
4. shadow-md: Voegt een middelgrote schaduw toe.

1. h-16: Stelt de hoogte in;
2. w-16: Stelt de breedte in;
3. rounded-full: Maakt de afbeelding cirkelvormig;
4. mx-auto: Centreert de afbeelding horizontaal.

1. text-center: Centreert de tekst;
2. mt-4: Voegt een bovenmarge toe;
3. text-lg: Stelt de lettergrootte in;
4. font-semibold: Maakt de tekst halfvet;
5. text-gray-500: Stelt de tekstkleur in op grijs.

1. mt-4: Voegt een bovenmarge toe;
2. px-4: Voegt horizontale opvulling toe;
3. py-2: Voegt verticale opvulling toe;
4. bg-blue-500: Stelt de achtergrondkleur in op blauw;
5. text-white: Stelt de tekstkleur in op wit;
6. rounded: Voegt kleine afgeronde hoeken toe;
7. hover:bg-blue-700: Wijzigt de achtergrondkleur bij hover.