Kort er alsidige UI-komponenter, der kan vise forskellige typer indhold såsom billeder, tekst og interaktive elementer som knapper. Tailwind CSS tilbyder en række værktøjer, der gør det nemt at oprette og style kortkomponenter.

Kortstruktur

En grundlæggende kortkomponent indeholder typisk følgende elementer: et billede, en titel, beskrivende tekst og handlingsknapper.

Vi kender allerede de enkelte elementer i denne komponent, så lad os samle al vores viden i ét komplet kort.

Forklaring

1. max-w-sm: Angiver den maksimale bredde for elementet til lille størrelse (24rem eller 384px);
2. rounded: Anvender små afrundede hjørner på elementet;
3. overflow-hidden: Sikrer, at alt indhold, der går ud over elementets grænser, skjules;
4. shadow-lg: Anvender en stor skygge på elementet.

1. w-full: Sætter billedets bredde til 100% af dets container;
2. px-6: Tilføjer horisontal polstring på 1.5rem (24px) på både venstre og højre side;
3. py-4: Tilføjer vertikal polstring på 1rem (16px) på både top og bund;
4. font-bold: Anvender fed skriftvægt;
5. text-xl: Sætter skriftstørrelsen til xl (1.25rem eller 20px);
6. mb-2: Tilføjer en bundmargen på 0.5rem (8px);
7. text-gray-700: Sætter tekstfarven til en mellemgrå nuance;
8. text-base: Sætter skriftstørrelsen til base (1rem eller 16px).

1. px-6: Tilføjer horisontal polstring på 1.5rem (24px) på både venstre og højre side;
2. pt-4: Tilføjer øverste polstring på 1rem (16px);
3. pb-2: Tilføjer nederste polstring på 0.5rem (8px);
4. bg-blue-500: Indstiller baggrundsfarven til en blå nuance;
5. hover:bg-blue-700: Ændrer baggrundsfarven til en mørkere blå nuance ved hover;
6. text-white: Indstiller tekstfarven til hvid;
7. font-bold: Anvender fed skriftvægt;
8. py-2: Tilføjer lodret polstring på 0.5rem (8px);
9. px-4: Tilføjer horisontal polstring på 1rem (16px);
10. rounded: Anvender små afrundede hjørner på knappen;
11. bg-gray-500: Indstiller baggrundsfarven til en grå nuance;
12. hover:bg-gray-700: Ændrer baggrundsfarven til en mørkere grå nuance ved hover;
13. text-white: Indstiller tekstfarven til hvid;
14. font-bold: Anvender fed skriftvægt;
15. py-2: Tilføjer lodret polstring på 0.5rem (8px);
16. px-4: Tilføjer horisontal polstring på 1rem (16px);
17. rounded: Anvender små afrundede hjørner på knappen;
18. ml-2: Tilføjer venstre margin på 0.5rem (8px).

Som du kan se, er alle hjælpeklasser allerede taget i betragtning. Nu kombineres alt i én kort-komponent.

Lad os tilføje endnu en sektion til det forrige eksempel, som vil være badges.

Forklaring - Badges

1. px-6: Tilføjer horisontal polstring på 1.5rem (24px) til både venstre og højre;
2. pt-4: Tilføjer øverste polstring på 1rem (16px);
3. pb-2: Tilføjer nederste polstring på 0.5rem (8px);
4. inline-block: Viser elementet som en inline-niveau blokbeholder;
5. bg-gray-200: Indstiller baggrundsfarven til en lys grå;
6. rounded-full: Anvender fuldt afrundede hjørner på elementet;
7. px-3: Tilføjer horisontal polstring på 0.75rem (12px) til både venstre og højre;
8. py-1: Tilføjer vertikal polstring på 0.25rem (4px) til både top og bund;
9. text-sm: Indstiller skriftstørrelsen til lille (0.875rem eller 14px);
10. font-semibold: Anvender en semibold skrifttypevægt;
11. text-gray-700: Indstiller tekstfarven til en mellemgrå;
12. mr-2: Tilføjer højre margin på 0.5rem (8px);
13. mb-2: Tilføjer nederste margin på 0.5rem (8px).

Bemærk

Alle dybdegående oplysninger om Card-komponenten kan findes her.