Tailwind je ogrodje CSS, ki ponuja nabor vnaprej določenih vrednosti za različne lastnosti, kot so barve, razmiki, velikosti pisave itd. Včasih pa uporabniki morda želijo uporabiti vrednost, ki ni vključena v privzeto konfiguracijo, na primer po meri barvo ali določen rob. V tem primeru lahko uporabijo poljubne vrednosti.

Ta članek bo razložil metodo za uporabo poljubnih vrednosti v Tailwind CSS.

Kako uporabiti poljubne vrednosti v Tailwindu?

Poljubne vrednosti so vrednosti po meri, ki jih je mogoče zapisati neposredno v atribut razreda HTML, ne da bi jih definirali v konfiguracijski datoteki Tailwind. Imajo predpono z zapisom v oglatih oklepajih, kot je [24px], [2,5rem] itd. Če želite uporabiti poljubne vrednosti v Tailwindu, uporabite zapis z oglatimi oklepaji in določite katero koli vrednost po meri za dinamično generiranje razredov pripomočkov.

Za boljše razumevanje si oglejte spodnje korake:

1. korak: Uporabite poljubne vrednosti v programu HTML

Naredite program HTML in uporabite zapis v oglatih oklepajih s katero koli vrednostjo po meri, da ustvarite želene razrede. Na primer, uporabili smo “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, in drugi razredi:

Tukaj:

• “bg-[#e9e516]” razred nastavi barvo ozadja
  na “#e9e516” (rumena).
• “w-[600px]” razred nastavi širino
  na 600 slikovnih pik.
• “h-[400px]” razred uporabi višino 400 slikovnih pik za element
  .
• “p-[13px]” razred nastavi oblazinjenje
  na 13 slikovnih pik.
• »m-[19px]« razred nastavi rob
  na 19 slikovnih pik.

• »besedilo-[30px]« razred nastavi velikost pisave elementa

  na 30 slikovnih pik.

• »besedilo-[#7405ab]« razred nastavi barvo besedila elementa

  na vijolično (#7405ab).

• »sledenje-[0,5 rem]« razred uporablja razmik med črkami na 0,5 rema za element

  .

2. korak: Preverite izhod

Če želite zagotoviti, da poljubne vrednosti delujejo pravilno, si oglejte spletno stran HTML:

Zgornji izhod kaže, da poljubne vrednosti delujejo pravilno, kot so bile definirane.

Zaključek

Če želite uporabiti poljubne vrednosti v Tailwindu, uporabite zapis v oglatih oklepajih s katero koli vrednostjo po meri v programu HTML za dinamično ustvarjanje razredov. Uporabniki lahko uporabljajo vrednosti za katero koli lastnost, ki sprejema številsko ali barvno vrednost, kot so velikost pisave, barva, širina, višina, rob, oblazinjenje itd. V tem članku je razložena metoda za uporabo poljubnih vrednosti v Tailwind CSS.