Cum să aplicați hover, focus și stări active cu grosimea decorului textului în Tailwind

Cum Sa Aplicati Hover Focus Si Stari Active Cu Grosimea Decorului Textului In Tailwind



În timp ce creează site-uri bazate pe conținut, există adesea o cerință ca programatorul să evidențieze terminologiile vitale pentru o mai bună experiență și înțelegere a utilizatorului. Într-un astfel de caz, „ Grosimea decorului textului Intră în vigoare utilitatea în Tailwind care poate fi încorporată într-un mod personalizat, conform aspectului site-ului.

Acest tutorial explică următoarele conținuturi:

Cum se aplică stările Hover, Focus și Active cu grosimea decorării textului în Tailwind?

„ Decorarea textului Grosimea ” poate fi aplicat cu aceste stări utilizând starea țintă și „ text-decor-grosime ” urmată de valoarea grosimii țintă în pixeli. Integrarea acestor abordări modifică grosimea decorului textului (în pixeli) la trecerea mouse-ului, elementul fiind focalizat sau elementul activ. Acești pixeli pot fi „ 1px ', ' 2px ', ' 4px ” sau ” 8px ”. Este de așa natură încât cu cât sunt mai mulți pixeli, cu atât grosimea este mai mare.





Exemplul 1: Aplicarea grosimii decorului textului cu starea „hover”.

Acest exemplu aplică „ text-decor-grosime ” proprietate cu ” planare ” stare pentru a seta grosimea 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 de text clasă = „subliniere hover:decor-4” > James este punctual < / zona de text >

< / corp >

< / html >

În acest fragment de cod, includeți calea CDN în eticheta „” pentru a utiliza funcționalitățile Tailwind. După aceea, în cadrul „