Ang Tailwind ay isang CSS framework na nag-aalok ng isang hanay ng mga paunang natukoy na halaga para sa iba't ibang katangian, tulad ng mga kulay, espasyo, laki ng font, atbp. Gayunpaman, kung minsan ang mga user ay maaaring gustong gumamit ng value na hindi kasama sa default na configuration, gaya ng custom kulay o isang tiyak na margin. Sa sitwasyong ito, maaari silang gumamit ng mga arbitrary na halaga.

Ipapaliwanag ng artikulong ito ang paraan ng paggamit ng mga arbitrary na halaga sa Tailwind CSS.

Paano Gamitin ang Arbitrary Values ​​sa Tailwind?

Ang mga arbitrary na halaga ay ang mga custom na halaga na maaaring direktang isulat sa HTML class attribute nang hindi tinutukoy ang mga ito sa Tailwind configuration file. Ang mga ito ay prefix na may square bracket notation, gaya ng [24px], [2.5rem], atbp. Upang magamit ang mga arbitrary na value sa Tailwind, gumamit ng square bracket notation at tukuyin ang anumang custom na value para dynamic na bumuo ng mga utility class.

Tingnan ang mga hakbang na nakalista sa ibaba para sa mas mahusay na pag-unawa:

Hakbang 1: Gumamit ng Arbitrary Values ​​sa HTML Program

Gumawa ng HTML program at gamitin ang square bracket notation na may anumang custom na value para gawin ang mga gustong klase. Halimbawa, ginamit namin ang “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, at iba pang klase:

dito:

• “bg-[#e9e516]” itinatakda ng klase ang kulay ng background ng
  sa “#e9e516” (dilaw).
• “w-[600px]” itinatakda ng klase ang lapad ng
  sa 600 pixels.
• “h-[400px]” inilalapat ng klase ang taas na 400 pixels sa
  na elemento.
• “p-[13px]” Itinatakda ng klase ang padding ng
  sa 13 pixels.
• “m-[19px]” Itinatakda ng klase ang margin ng
  sa 19 pixels.

• “text-[30px]” itinatakda ng klase ang laki ng font ng

  elemento sa 30 pixels.

• “text-[#7405ab]” class set

  ang kulay ng text ng elemento sa purple (#7405ab).

• 'pagsubaybay-[0.5rem]' inilalapat ng klase ang letter-spacing sa 0.5 rem sa

  na elemento.

Hakbang 2: I-verify ang Output

Upang matiyak na ang mga arbitrary na halaga ay gumagana nang maayos, tingnan ang HTML web page:

Ang output sa itaas ay nagpapahiwatig na ang mga di-makatwirang halaga ay gumagana nang maayos gaya ng tinukoy.

Konklusyon

Para magamit ang mga arbitrary na value sa Tailwind, gumamit ng square bracket notation na may anumang custom na value sa HTML program para dynamic na bumuo ng mga klase. Maaaring gumamit ang mga user ng mga value para sa anumang property na tumatanggap ng numeric o color value, gaya ng laki ng font, kulay, lapad, taas, margin, padding, atbp. Ipinaliwanag ng artikulong ito ang paraan ng paggamit ng mga arbitrary na value sa Tailwind CSS.