Paano Mag-apply ng Text Dekorasyon na may Tailwind Hover, Focus, at Active States

Paano Mag Apply Ng Text Dekorasyon Na May Tailwind Hover Focus At Active States



Habang isinasama ang iba't ibang mga pag-andar sa web page o sa site, may mga pagkakataon kung saan ang programmer ay kailangang magdagdag ng mga interactive na link na nagiging kitang-kita sa pagkilos ng user i.e., mouse hover. Sa ganitong mga sitwasyon, ang pagdekorasyon ng teksto alinsunod sa iba't ibang mga estado ay gumagawa ng mga kababalaghan sa paggawa ng site na kakaiba.

Sinasaklaw ng blog na ito ang ibabang bahagi ng nilalaman:

Paano Mag-apply ng Text Dekorasyon na may Tailwind Hover, Focus, at Active States?

Ang teksto ay maaaring palamutihan sa pamamagitan ng ' text-dekorasyon ” ari-arian. Maaaring ilapat ang property na ito sa iba't ibang status ng modifier tulad ng ' hover ',' focus 'at' aktibo ” upang palamutihan ang teksto sa pagkilos ng user nang naaayon.





Halimbawa 1: Paglalapat ng Text Dekorasyon na may 'hover' na Estado

Inilalapat ng halimbawang ito ang ' text-dekorasyon ” property na hindi ito nakasalungguhit bilang default ngunit nagiging salungguhit sa mouse hover:





< html >

< ulo >

< meta charset = 'utf-8' >

< meta pangalan = 'viewport' nilalaman = 'width=device-width, initial-scale=1' >

< iskrip src = 'https://cdn.tailwindcss.com' >< / iskrip >< / ulo >

< katawan >

< textarea klase = 'no-underline hover:underline' > Ito ang Tailwind CSS < / textarea >

< / katawan >

< / html >

Ayon sa mga linyang ito ng code, tukuyin ang CDN path sa loob ng “ ” tag para magamit ang mga functionality ng Tailwind. Ngayon, ilapat ang pinagsamang ' text-dekorasyon ' ari-arian kasama ang ' hover ” sabihin na sa pag-hover ng elemento, ito ay nagiging may salungguhit.



Output



Tulad ng nakikita, ang '