Cum să aplicați decorarea textului cu Tailwind Hover, Focus și Active States

Cum Sa Aplicati Decorarea Textului Cu Tailwind Hover Focus Si Active States



În timp ce încorporează diverse funcționalități pe pagina web sau pe site, există cazuri în care programatorul trebuie să atașeze link-uri interactive care devin proeminente la acțiunea utilizatorului, de exemplu, trecerea mouse-ului. În astfel de scenarii, decorarea textului în conformitate cu diferite stări face minuni în a face site-ul să iasă în evidență.

Acest blog acoperă următoarele domenii de conținut:

Cum se aplică decorarea textului cu Tailwind Hover, Focus și Active State?

Textul poate fi decorat prin intermediul „ text-decor ” proprietate. Această proprietate poate fi aplicată cu diferite stări modificatoare, cum ar fi „ planare ', ' se concentreze ' și ' activ ” pentru a decora textul în funcție de acțiunea utilizatorului.





Exemplul 1: Aplicarea decorului text cu starea „hover”.

Acest exemplu aplică „ text-decor ” proprietate astfel încât nu este subliniată în mod implicit, ci devine subliniată la trecerea mouse-ului:





< html >

< cap >

< meta set de caractere = 'utf-8' >

< meta Nume = 'vizor' conţinut = „width=device-width, initial-scale=1” >

< scenariu src = „https://cdn.tailwindcss.com” >< / scenariu >< / cap >

< corp >

< zona textului clasă = „fără subliniere hover:subliniere” > Acesta este Tailwind CSS < / zona textului >

< / corp >

< / html >

În conformitate cu aceste linii de cod, specificați calea CDN în cadrul „ ” pentru a utiliza funcționalitățile Tailwind. Acum, aplicați combinația „ text-decor ” proprietate împreună cu ” planare ” se menționează astfel încât la trecerea cu mouse-ul pe element, acesta devine subliniat.



Ieșire



După cum s-a văzut, „