Utforming av Kortkomponenter

Når du bygger brukergrensesnitt, er kortkomponenter en populær måte å gruppere relatert innhold visuelt på. Kort hjelper til med å organisere informasjon i oversiktlige blokker, noe som gjør oppsett enklere å skanne og samhandle med. Med Tailwind CSS kan du raskt sette sammen kortkomponenter ved å bruke hjelpeklasser for avstand, bakgrunn, kanter og skygger direkte i din React JSX.

En typisk kortstruktur inkluderer tre hovedseksjoner: en topp, et innholdsfelt og en bunn. Toppen inneholder ofte en tittel eller et bilde, innholdsfeltet har hovedinnholdet, og bunnen kan inkludere handlinger som knapper eller lenker. For å lage et visuelt tiltalende kort kan du bruke Tailwinds p-*-klasser for polstring, bg-* for bakgrunnsfarge, rounded-* for hjørneradius og shadow-* for dybde. Disse klassene gir deg kontroll over utseendet og følelsen til kortet uten å skrive egen CSS.

For eksempel, for å starte et kort, kan du bruke bg-white for en ren bakgrunn, rounded-lg for myke hjørner og shadow-md for å få kortet til å skille seg ut fra siden. Avstand mellom kortets seksjoner styres med p-4 eller mb-2-klasser, mens tekst kan styles med font-bold eller text-gray-700.

Her går vi gjennom hvordan du lager en enkel Card-komponent i React. Start med å definere en funksjonell komponent. Inne i den returnerte JSX-en strukturerer du kortet med en container-div som bruker de sentrale Tailwind-klassene for oppsett, bakgrunn, hjørneradius og skygge. Deretter legger du til underordnede div-er for topp, innhold og bunn, hver med egne avstands- og typografiklasser. For toppen kan du bruke text-xl og font-semibold, for innholdet text-base og text-gray-700, og for bunnen et fleksibelt oppsett for handlingsknapper eller lenker.

Slik kan du organisere JSX-en for en kortkomponent:

function Card({ title, content, footer }) {
  return (
    <div className="bg-white rounded-lg shadow-md p-6 max-w-sm">
      <div className="mb-4 text-xl font-semibold">{title}</div>
      <div className="mb-6 text-base text-gray-700">{content}</div>
      <div className="flex justify-end space-x-2">{footer}</div>
    </div>
  );
}

I dette eksempelet setter bg-white bakgrunnen, rounded-lg gir store avrundede hjørner, shadow-md gir en middels skygge, og p-6 gir polstring gjennom hele kortet. Toppen bruker mb-4 for å skille den fra innholdet, og bunnen bruker fleksverktøy for å justere handlinger til høyre. Du kan tilpasse disse klassene etter ditt design, for eksempel ved å justere polstring, skyggeintensitet eller bakgrunnsfarge etter behov.

Ved å bruke Tailwinds hjelpeklasser kan du raskt sette sammen og iterere på kortoppsett, og sikre konsistens og responsivitet i hele applikasjonen din.