Tailwind je CSS okvir koji nudi skup unaprijed definiranih vrijednosti za različita svojstva, kao što su boje, razmaci, veličine fonta itd. Međutim, ponekad korisnici mogu htjeti koristiti vrijednost koja nije uključena u zadanu konfiguraciju, kao što je prilagođena boju ili određenu marginu. U ovoj situaciji mogu koristiti proizvoljne vrijednosti.
Ovaj će članak objasniti metodu korištenja proizvoljnih vrijednosti u Tailwind CSS-u.
Kako koristiti proizvoljne vrijednosti u Tailwindu?
Proizvoljne vrijednosti su prilagođene vrijednosti koje se mogu napisati izravno u atribut HTML klase bez definiranja u konfiguracijskoj datoteci Tailwind. Prefiks im je notacija uglatih zagrada, kao što je [24px], [2.5rem], itd. Za korištenje proizvoljnih vrijednosti u Tailwindu, upotrijebite notaciju uglatih zagrada i odredite bilo koju prilagođenu vrijednost za dinamičko generiranje klasa korisnosti.
Za bolje razumijevanje pogledajte dolje navedene korake:
Korak 1: Koristite proizvoljne vrijednosti u HTML programu
Napravite HTML program i upotrijebite notaciju uglatih zagrada s bilo kojom prilagođenom vrijednošću za stvaranje željenih klasa. Na primjer, koristili smo “bg-[#e9e516]”, “w-[600px]”, “h-[400px]”, “p-[13px]”, i druge klase:
< tijelo >
< div razreda = 'bg-[#e9e516] w-[600px] h-[400px] p-[13px] m-[19px]' >
< h1 razreda = 'tekst-[30px]' > Savjet za Linux < / h1 >
< h2 razreda = 'tekst-[#7405ab]' > Dobrodošli < / h2 >
< str razreda = 'praćenje-[0.5rem]' > Saznajte više o Tailwindu < / str >
< / div >
< / tijelo >
Ovdje:
- “bg-[#e9e516]” klasa postavlja boju pozadine na “#e9e516” (žuta boja).
- “w-[600px]” klasa postavlja širinu
na 600 piksela.- “h-[400px]” klasa primjenjuje visinu od 400 piksela na
element.- “p-[13px]” klasa postavlja ispunu
na 13 piksela.- “m-[19px]” klasa postavlja marginu
na 19 piksela.- “tekst-[30px]” klasa postavlja veličinu fonta elementa
na 30 piksela.
- “tekst-[#7405ab]” klasa je postavila boju teksta elementa
na ljubičastu (#7405ab).
- “tracking-[0.5rem]” klasa primjenjuje razmak između slova na 0,5 rema na
element.
Korak 2: Provjerite izlaz
Kako biste bili sigurni da proizvoljne vrijednosti rade ispravno, pogledajte HTML web stranicu:
Gornji izlaz pokazuje da proizvoljne vrijednosti rade ispravno kako su definirane.
Zaključak
Za korištenje proizvoljnih vrijednosti u Tailwindu, upotrijebite notaciju uglatih zagrada s bilo kojom prilagođenom vrijednošću u HTML programu za dinamičko generiranje klasa. Korisnici mogu koristiti vrijednosti za bilo koje svojstvo koje prihvaća numeričku vrijednost ili vrijednost boje, kao što su veličina fonta, boja, širina, visina, margina, ispuna itd. Ovaj članak objašnjava metodu korištenja proizvoljnih vrijednosti u Tailwind CSS-u.
- “w-[600px]” klasa postavlja širinu