Tailwind yra CSS sistema, kuri siūlo iš anksto nustatytų reikšmių rinkinį įvairioms ypatybėms, pvz., spalvoms, tarpams, šrifto dydžiams ir kt. Tačiau kartais vartotojai gali norėti naudoti vertę, kuri neįtraukta į numatytąją konfigūraciją, pvz., tinkintą. spalva arba tam tikra paraštė. Esant tokiai situacijai, jie gali naudoti savavališkas vertes.

Šiame straipsnyje bus paaiškinta, kaip naudoti savavališkas reikšmes Tailwind CSS.

Kaip panaudoti savavališkas vertybes „Tailwind“?

Savavališkos reikšmės yra tinkintos reikšmės, kurias galima įrašyti tiesiai į HTML klasės atributą, jų neapibrėžiant Tailwind konfigūracijos faile. Prieš juos pateikiami laužtiniai skliaustai, pvz., [24 pikseliai], [2,5 rem] ir t. t. Norėdami panaudoti savavališkas „Tailwind“ reikšmes, naudokite laužtinius skliaustus ir nurodykite bet kokią pasirinktinę reikšmę, kad būtų dinamiškai generuojamos naudingumo klasės.

Norėdami geriau suprasti, peržiūrėkite toliau nurodytus veiksmus:

1 veiksmas: naudokite savavališkas reikšmes HTML programoje

Sukurkite HTML programą ir naudokite laužtinius skliaustus su bet kokia pasirinktine verte, kad sukurtumėte norimas klases. Pavyzdžiui, mes panaudojome „bg-[#e9e516]“, „w-[600px]“, „h-[400px]“, „p-[13px]“, ir kitos klasės:

Čia:

• „bg-[#e9e516]“ klasė nustato
  fono spalvą į „# e9e516“ (geltona).
• 'w-[600px]' klasė nustato
  plotį iki 600 pikselių.
• 'h-[400px]' klasė elementui
  pritaiko 400 pikselių aukštį.
• „p-[13px]“ klasė nustato
  užpildymą iki 13 pikselių.
• „m-[19px]“ klasė nustato
  paraštę iki 19 pikselių.

• „tekstas-[30 piks.]“ klasė nustato

  elemento šrifto dydį iki 30 pikselių.

• „text-[#7405ab]“ klasė nustatė

  elemento teksto spalvą į violetinę (#7405ab).

• „tracking-[0.5rem]“ klasė taiko tarpą tarp raidžių 0,5 rem elementui

  .

2 veiksmas: patikrinkite išvestį

Norėdami įsitikinti, kad savavališkos reikšmės veikia tinkamai, peržiūrėkite HTML tinklalapį:

Aukščiau pateikta išvestis rodo, kad savavališkos reikšmės veikia tinkamai, kaip buvo apibrėžtos.

Išvada

Norėdami panaudoti savavališkas „Tailwind“ vertes, naudokite laužtinius skliaustus su bet kokia tinkinta reikšme HTML programoje, kad dinamiškai generuotumėte klases. Vartotojai gali naudoti reikšmes bet kuriai ypatybei, kuri priima skaitines arba spalvines vertes, pvz., šrifto dydį, spalvą, plotį, aukštį, paraštę, užpildymą ir t. t. Šiame straipsnyje paaiškinta, kaip naudoti savavališkas reikšmes „Tailwind CSS“.