Tailwind on CSS-kehys, joka tarjoaa joukon ennalta määritettyjä arvoja eri ominaisuuksille, kuten väreille, välityksille, fonttikoolle jne. Joskus käyttäjät saattavat kuitenkin haluta käyttää arvoa, joka ei sisälly oletuskokoonpanoon, kuten mukautettua väri tai tietty marginaali. Tässä tilanteessa he voivat käyttää mielivaltaisia ​​arvoja.

Tässä artikkelissa selitetään tapa käyttää mielivaltaisia ​​arvoja Tailwind CSS:ssä.

Kuinka hyödyntää mielivaltaisia ​​arvoja Tailwindissä?

Mielivaltaiset arvot ovat mukautettuja arvoja, jotka voidaan kirjoittaa suoraan HTML-luokkaattribuutissa ilman, että niitä määritellään Tailwind-määritystiedostossa. Niiden etuliitteenä on hakasulkumerkintä, kuten [24px], [2.5rem] jne. Voit käyttää mielivaltaisia ​​arvoja Tailwindissä käyttämällä hakasulkeiden merkintää ja määrittämällä mitkä tahansa mukautetut arvot hyödyllisyysluokkien luomiseksi dynaamisesti.

Tarkista alla luetellut vaiheet ymmärtääksesi paremmin:

Vaihe 1: Käytä mielivaltaisia ​​arvoja HTML-ohjelmassa

Tee HTML-ohjelma ja käytä hakasulkeiden merkintää millä tahansa mukautetulla arvolla haluttujen luokkien luomiseen. Olemme käyttäneet esimerkiksi 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', ja muut luokat:

Tässä:

• 'bg-[#e9e516]' luokka asettaa
  :n taustavärin '#e9e516' (keltainen).
• 'w-[600px]' luokka asettaa
  :n leveydeksi 600 pikseliä.
• 'h-[400px]' luokka käyttää 400 pikselin korkeutta
  -elementtiin.
• 'p-[13px]' luokka asettaa
  :n täyteen 13 pikseliä.
• 'm-[19px]' luokka asettaa
  :n marginaaliksi 19 pikseliä.

• 'teksti-[30px]' luokka asettaa

  -elementin kirjasinkooksi 30 pikseliä.

• 'teksti-[#7405ab]' luokka asettaa

  -elementin tekstin väriksi violetti (#7405ab).

• 'tracking-[0.5rem]' luokka käyttää kirjainväliä 0,5 rem

  -elementtiin.

Vaihe 2: Tarkista lähtö

Varmistaaksesi, että mielivaltaiset arvot toimivat oikein, tarkastele HTML-verkkosivua:

Yllä oleva tulos osoittaa, että mielivaltaiset arvot toimivat oikein siten kuin ne on määritelty.

Johtopäätös

Voit käyttää mielivaltaisia ​​arvoja Tailwindissä luomalla luokkia dynaamisesti käyttämällä hakasulkeiden merkintää minkä tahansa mukautetun arvon kanssa HTML-ohjelmassa. Käyttäjät voivat käyttää arvoja mille tahansa ominaisuudelle, joka hyväksyy numeerisen tai värillisen arvon, kuten fontin koon, värin, leveyden, korkeuden, marginaalin, täytön jne. Tässä artikkelissa on selitetty tapa käyttää mielivaltaisia ​​arvoja Tailwind CSS:ssä.