Anvendelse af Utility-klasser i HTML

For at anvende utility-klasser i Tailwind CSS, tilføjes de til class-attributten på dine HTML-elementer. Hver klasse svarer til en specifik CSS-regel, hvilket gør det nemt at forstå og administrere dine stilarter direkte i HTML'en.

HTML-struktur

Start med en grundlæggende HTML-struktur.

Anvendelse af hjælpeklasser

Tilføjelse af hjælpeklasser til class-attributten på dine elementer for at style dem.

Forklaring

1. p-4: Tilføjer polstring;
2. bg-gray-100: Indstiller baggrundsfarven til lysegrå;
3. rounded-lg: Tilføjer store afrundede hjørner;
4. shadow-md: Tilføjer en medium skygge.

1. h-16: Indstiller højden;
2. w-16: Indstiller bredden;
3. rounded-full: Gør billedet cirkulært;
4. mx-auto: Centrerer billedet horisontalt.

1. text-center: Centrerer teksten;
2. mt-4: Tilføjer øverste margin;
3. text-lg: Angiver skriftstørrelsen;
4. font-semibold: Gør teksten halvfed;
5. text-gray-500: Angiver tekstfarven til grå.

1. mt-4: Tilføjer øverste margin;
2. px-4: Tilføjer horisontal polstring;
3. py-2: Tilføjer vertikal polstring;
4. bg-blue-500: Angiver baggrundsfarven til blå;
5. text-white: Angiver tekstfarven til hvid;
6. rounded: Tilføjer små afrundede hjørner;
7. hover:bg-blue-700: Ændrer baggrundsfarven ved hover.