Kort är mångsidiga UI-komponenter som kan visa olika typer av innehåll såsom bilder, text och interaktiva element som knappar. Tailwind CSS erbjuder ett brett utbud av verktyg som gör det enkelt att skapa och anpassa kortkomponenter.

Kortstruktur

En grundläggande kortkomponent innehåller vanligtvis följande element: en bild, en titel, beskrivande text och åtgärdsknappar.

Vi känner redan till de enskilda elementen i denna komponent, så låt oss sammanfoga all vår kunskap till ett komplett kort.

Förklaring

1. max-w-sm: Anger det maximala bredden på elementet till liten storlek (24rem eller 384px);
2. rounded: Tillämpas små rundade hörn på elementet;
3. overflow-hidden: Säkerställer att allt innehåll som överskrider elementets gränser döljs;
4. shadow-lg: Lägger till en stor skugga runt elementet.

1. w-full: Sätter bildens bredd till 100% av dess behållare;
2. px-6: Lägger till horisontell utfyllnad på 1,5rem (24px) på både vänster och höger sida;
3. py-4: Lägger till vertikal utfyllnad på 1rem (16px) på både över- och undersida;
4. font-bold: Tillämpas fet stil på texten;
5. text-xl: Sätter teckenstorleken till xl (1,25rem eller 20px);
6. mb-2: Lägger till en nederkantmarginal på 0,5rem (8px);
7. text-gray-700: Sätter textfärgen till en mellangrå nyans;
8. text-base: Sätter teckenstorleken till bas (1rem eller 16px).

1. px-6: Lägger till horisontell utfyllnad på 1.5rem (24px) på både vänster och höger;
2. pt-4: Lägger till övre utfyllnad på 1rem (16px);
3. pb-2: Lägger till nedre utfyllnad på 0.5rem (8px);
4. bg-blue-500: Anger bakgrundsfärgen till en blå nyans;
5. hover:bg-blue-700: Ändrar bakgrundsfärgen till en mörkare blå nyans vid hovring;
6. text-white: Anger textfärgen till vit;
7. font-bold: Tillämpas fetstilt typsnitt;
8. py-2: Lägger till vertikal utfyllnad på 0.5rem (8px);
9. px-4: Lägger till horisontell utfyllnad på 1rem (16px);
10. rounded: Tillämpas små rundade hörn på knappen;
11. bg-gray-500: Anger bakgrundsfärgen till en grå nyans;
12. hover:bg-gray-700: Ändrar bakgrundsfärgen till en mörkare grå nyans vid hovring;
13. text-white: Anger textfärgen till vit;
14. font-bold: Tillämpas fetstilt typsnitt;
15. py-2: Lägger till vertikal utfyllnad på 0.5rem (8px);
16. px-4: Lägger till horisontell utfyllnad på 1rem (16px);
17. rounded: Tillämpas små rundade hörn på knappen;
18. ml-2: Lägger till vänstermarginal på 0.5rem (8px).

Som du kan se har alla hjälpaklasser redan beaktats. Nu kombineras allt i en kortkomponent.

Vi lägger till en sektion till i det tidigare exemplet, vilket blir badges.

Förklaring - Märken

1. px-6: Lägger till horisontell utfyllnad på 1.5rem (24px) på både vänster och höger sida;
2. pt-4: Lägger till övre utfyllnad på 1rem (16px);
3. pb-2: Lägger till nedre utfyllnad på 0.5rem (8px);
4. inline-block: Visar elementet som en inline-nivå blockbehållare;
5. bg-gray-200: Anger bakgrundsfärgen till ljusgrå;
6. rounded-full: Tillämpas helt rundade hörn på elementet;
7. px-3: Lägger till horisontell utfyllnad på 0.75rem (12px) på både vänster och höger sida;
8. py-1: Lägger till vertikal utfyllnad på 0.25rem (4px) både upptill och nedtill;
9. text-sm: Anger teckenstorleken till liten (0.875rem eller 14px);
10. font-semibold: Tillämpas halvfet teckenvikt;
11. text-gray-700: Anger textfärgen till mellangrå;
12. mr-2: Lägger till högermarginal på 0.5rem (8px);
13. mb-2: Lägger till nedre marginal på 0.5rem (8px).

Observera

All detaljerad information om kortkomponenten finns här.