Tailwind er et CSS-rammeverk som tilbyr et sett med forhåndsdefinerte verdier for ulike egenskaper, som farger, mellomrom, skriftstørrelser osv. Noen ganger kan det imidlertid hende at brukere vil bruke en verdi som ikke er inkludert i standardkonfigurasjonen, for eksempel en egendefinert farge eller en spesifikk marg. I denne situasjonen kan de bruke vilkårlige verdier.

Denne artikkelen vil forklare metoden for å bruke vilkårlige verdier i Tailwind CSS.

Hvordan utnytte vilkårlige verdier i medvind?

Vilkårlige verdier er de egendefinerte verdiene som kan skrives direkte i HTML-klasseattributtet uten å definere dem i Tailwind-konfigurasjonsfilen. De er prefiks med en hakeparentes-notasjon, slik som [24px], [2.5rem], osv. For å utnytte de vilkårlige verdiene i Tailwind, bruk en firkantet brakett-notasjon og spesifiser en egendefinert verdi for å generere nytteklasser dynamisk.

Sjekk ut trinnene nedenfor for bedre forståelse:

Trinn 1: Bruk vilkårlige verdier i HTML-programmet

Lag et HTML-program og bruk hakeparentesnotasjonen med en egendefinert verdi for å lage de ønskede klassene. For eksempel har vi brukt 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', og andre klasser:

Her:

• «bg-[#e9e516]» klasse setter bakgrunnsfargen til
  til «#e9e516» (gul).
• «w-[600px]» klasse setter bredden på
  til 600 piksler.
• «h-[400px]» klasse bruker høyden på 400 piksler på
  -elementet.
• «p-[13px]» klasse setter utfyllingen av
  til 13 piksler.
• «m-[19px]» klasse setter marginen til
  til 19 piksler.

• «tekst-[30px]» klasse setter skriftstørrelsen til

  -elementet til 30 piksler.

• «tekst-[#7405ab]» klasse sett

  -elementets tekstfarge til lilla (#7405ab).

• «sporing-[0.5rem]» klasse bruker bokstavavstanden til 0,5 rem til

  -elementet.

Trinn 2: Bekreft utdata

For å sikre at de vilkårlige verdiene fungerer som de skal, se HTML-nettsiden:

Ovennevnte utdata indikerer at de vilkårlige verdiene fungerer som de ble definert.

Konklusjon

For å bruke de vilkårlige verdiene i Tailwind, bruk en hakeparentesnotasjon med en egendefinert verdi i HTML-programmet for å generere klasser dynamisk. Brukere kan bruke verdier for en hvilken som helst egenskap som godtar en numerisk eller fargeverdi, for eksempel skriftstørrelse, farge, bredde, høyde, margin, utfylling osv. Denne artikkelen har forklart metoden for å bruke vilkårlige verdier i Tailwind CSS.