Slik bruker du sveve, fokus og aktive tilstander med tekstdekorasjonstykkelse i medvind

Slik Bruker Du Sveve Fokus Og Aktive Tilstander Med Tekstdekorasjonstykkelse I Medvind



Mens du lager innholdsbaserte nettsteder, er det ofte et krav at programmereren skal fremheve de viktige terminologiene for bedre brukeropplevelse og forståelse. I et slikt tilfelle vil ' Tekstdekor tykkelse ”-verktøyet i Tailwind trer i kraft som kan inkorporeres på en tilpasset måte i henhold til nettstedets layout.

Denne opplæringen forklarer følgende innhold:

Hvordan bruke hover, fokus og aktive tilstander med tekstdekorasjonstykkelse i medvind?

« Tekstdekor Tykkelse ' kan brukes med disse tilstandene ved å bruke måltilstanden og ' tekst-dekor-tykkelse ” egenskap etterfulgt av måltykkelsesverdien i piksler. Integreringen av disse tilnærmingene endrer tekstdekorasjonstykkelsen (i piksler) ved musepeking, elementet som fokuseres eller elementet er aktivt. Disse pikslene kan være ' 1 px ', ' 2px ', ' 4px ' eller ' 8 px '. Det er slik at jo flere piksler, jo mer er tykkelsen.





Eksempel 1: Påføring av tekstdekorasjonstykkelsen med 'sveve'-tilstand

Dette eksemplet gjelder ' tekst-dekor-tykkelse ' eiendom med ' sveve ' tilstand for å angi tykkelsen ved musepekeren:





< html >

< hode >

< meta tegnsett = 'utf-8' >

< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >

< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / hode >

< kropp >

< tekstområde klasse = 'understrek hover:decoration-4' > James er punktlig < / tekstområde >

< / kropp >

< / html >

I denne kodebiten inkluderer du CDN-banen i «»-taggen for å bruke Tailwind-funksjonene. Etter det, innenfor ' '-elementet, spesifiser ' sveve ' oppgi sammen med den brukte ' tekst-dekor-tykkelse ” egenskap som setter dekorasjonstykkelsen fra standard understreking til en økt tykkelse på “4” piksler ved musepekeren.



Produksjon



Denne utgangen innebærer at tykkelsen på tekstdekorasjonen, dvs. understreking, settes tilsvarende.



Eksempel 2: Påføring av tekstdekorasjonstykkelse med 'fokus'-tilstand

Følgende eksempelkode implementerer tekstdekorasjonstykkelsen til en målpikselverdi når elementet blir fokusert ved å bruke ' Tab '-tasten:



< html >

< hode >

< meta tegnsett = 'utf-8' >

< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >

< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / hode >

< kropp >

< tekstområde klasse = 'understrek dekorasjon-1 fokus: dekorasjon-4' >James er punktlig< / tekstområde >

< / kropp >

< / html >

I denne kodeblokken gjentar du de diskuterte tilnærmingene for å inkorporere CDN-banen og ' ' element. Nå, spesifiser standardtykkelsen sammen med overgangstykkelsen, dvs. '4' piksler med ' fokus ”-tilstand for å bruke endringen på den utløste tilstanden.

Merk: Standaren ' understreke ' og ' understreke dekorasjon-1 ” egenskaper gir samme resultat.

Produksjon

Fra denne utgangen kan det verifiseres at tekstdekorasjonstykkelsen endres tilsvarende.

Eksempel 3: Påføring av tekstdekorasjonstykkelsen med 'aktiv' tilstand

I denne kodebiten endres tykkelsen på tekstdekorasjonen når elementet er aktivt:



< html >

< hode >

< meta tegnsett = 'utf-8' >

< meta Navn = 'viewport' innhold = 'width=device-width, initial-scale=1' >

< manus src = 'https://cdn.tailwindcss.com' >< / manus >< / hode >

< kropp >

< tekstområde klasse = 'understrek dekorasjon-1 aktiv:dekorasjon-8' >James er punktlig< / tekstområde >

< / kropp >

< / html >

I henhold til disse kodelinjene, inkorporerer også CDN-banen og '