Tailwind on CSS-i raamistik, mis pakub erinevate atribuutide (nt värvid, vahed, fondi suurused jne) jaoks eelmääratletud väärtusi. Mõnikord võivad kasutajad siiski soovida kasutada väärtust, mis ei sisaldu vaikekonfiguratsioonis (nt kohandatud väärtus). värv või konkreetne veeris. Sellises olukorras võivad nad kasutada suvalisi väärtusi.
See artikkel selgitab Tailwind CSS-is suvaliste väärtuste kasutamise meetodit.
Kuidas kasutada Tailwindis suvalisi väärtusi?
Suvalised väärtused on kohandatud väärtused, mille saab kirjutada otse HTML-klassi atribuuti, ilma neid Tailwindi konfiguratsioonifailis määratlemata. Nende ees on nurksulgude tähistus, nagu [24px], [2,5rem] jne. Suvaliste väärtuste kasutamiseks Tailwindis kasutage nurksulgude tähistust ja määrake mis tahes kohandatud väärtus, et utiliidiklassid dünaamiliselt genereerida.
Parema mõistmise huvides vaadake allolevaid samme:
1. samm: kasutage HTML-programmis suvalisi väärtusi
Looge HTML-programm ja kasutage soovitud klasside loomiseks mis tahes kohandatud väärtusega nurksulgu. Näiteks oleme kasutanud 'bg-[#e9e516]', 'w-[600px]', 'h-[400px]', 'p-[13px]', ja muud klassid:
< keha >
< div klass = 'bg-[#e9e516] w-[600px] h-[400px] p-[13px] m-[19px]' >
< h1 klass = 'tekst-[30 pikslit]' > Linuxi vihje < / h1 >
< h2 klass = 'text-[#7405ab]' > Tere tulemast < / h2 >
< lk klass = 'tracking-[0.5rem]' > Lisateave Tailwindi kohta < / lk >
< / div >
< / keha >
Siin:
- 'bg-[#e9e516]' klass määrab taustavärvi '# e9e516' (kollane).
- 'w-[600px]' klass määrab
laiuseks 600 pikslit.- 'h-[400px]' klass rakendab elemendile
kõrgust 400 pikslit.- 'p-[13px]' klass määrab
polsterduse 13 pikslile.- 'm-[19px]' klass määrab
veerise 19 pikslit.- 'tekst-[30 pikslit]' klass määrab elemendi
fondi suuruseks 30 pikslit.
- 'text-[#7405ab]' klassi seadis elemendi
teksti värviks lilla (#7405ab).
- 'tracking-[0.5rem]' klass rakendab elemendile
tähevahet 0,5 rem.
2. samm: kontrollige väljundit
Suvaliste väärtuste korrektse toimimise tagamiseks vaadake HTML-i veebilehte:
Ülaltoodud väljund näitab, et suvalised väärtused töötavad õigesti, nagu need on määratletud.
Järeldus
Suvaliste väärtuste kasutamiseks Tailwindis kasutage klasside dünaamiliseks genereerimiseks HTML-programmis mis tahes kohandatud väärtusega nurksulgu. Kasutajad saavad kasutada väärtusi mis tahes atribuudi jaoks, mis aktsepteerib numbrilisi või värvilisi väärtusi (nt fondi suurus, värv, laius, kõrgus, veeris, polster jne). Selles artiklis on selgitatud suvaliste väärtuste kasutamise meetodit Tailwind CSS-is.
- 'w-[600px]' klass määrab