Tailwind ir CSS ietvars, kas piedāvā iepriekš definētu vērtību kopu dažādiem rekvizītiem, piemēram, krāsām, atstarpēm, fontu lielumiem utt. Tomēr dažreiz lietotāji var vēlēties izmantot vērtību, kas nav iekļauta noklusējuma konfigurācijā, piemēram, pielāgotu. krāsa vai noteikta piemale. Šajā situācijā viņi var izmantot patvaļīgas vērtības.

Šajā rakstā ir izskaidrota metode patvaļīgu vērtību izmantošanai Tailwind CSS.

Kā Tailwind izmantot patvaļīgas vērtības?

Patvaļīgas vērtības ir pielāgotas vērtības, kuras var ierakstīt tieši HTML klases atribūtā, nedefinējot tās Tailwind konfigurācijas failā. Tiem ir pievienots kvadrātiekavas apzīmējums, piemēram, [24 pikseļi], [2,5 rem] utt. Lai izmantotu patvaļīgās vērtības programmā Tailwind, izmantojiet kvadrātiekavās un norādiet jebkuru pielāgotu vērtību, lai dinamiski ģenerētu lietderības klases.

Lai labāk izprastu, pārbaudiet tālāk norādītās darbības.

1. darbība. HTML programmā izmantojiet patvaļīgas vērtības

Izveidojiet HTML programmu un izmantojiet kvadrātiekavās ar jebkuru pielāgotu vērtību, lai izveidotu vēlamās klases. Piemēram, mēs esam izmantojuši “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, un citas klases:

Šeit:

• “bg-[#e9e516]” klase iestata
  fona krāsu uz “#e9e516” (dzeltens).
• “w-[600px]” klase iestata
  platumu uz 600 pikseļiem.
• “h-[400px]” klase elementam
  piemēro 400 pikseļu augstumu.
• “p-[13px]” klase iestata
  polsterējumu uz 13 pikseļiem.
• “m-[19px]” klase iestata
  malu uz 19 pikseļiem.

• “text-[30px]” klase iestata

  elementa fonta lielumu uz 30 pikseļiem.

• “text-[#7405ab]” klases iestatiet

  elementa teksta krāsu uz purpursarkanu (#7405ab).

• “tracking-[0.5rem]” klase lieto burtu atstarpi līdz 0,5 rem elementam

  .

2. darbība: pārbaudiet izvadi

Lai pārliecinātos, ka patvaļīgās vērtības darbojas pareizi, skatiet HTML tīmekļa lapu:

Iepriekš minētā izvade norāda, ka patvaļīgās vērtības darbojas pareizi, kā tās tika definētas.

Secinājums

Lai izmantotu patvaļīgās vērtības programmā Tailwind, izmantojiet kvadrātiekavas apzīmējumu ar jebkuru pielāgotu vērtību HTML programmā, lai dinamiski ģenerētu klases. Lietotāji var izmantot vērtības jebkuram rekvizītam, kas pieņem ciparu vai krāsu vērtību, piemēram, fonta lielumu, krāsu, platumu, augstumu, malu, polsterējumu utt. Šajā rakstā ir izskaidrota metode, kā izmantot patvaļīgas vērtības programmā Tailwind CSS.