Com aplicar estats actius, enfocats i actius amb el gruix de la decoració del text a Tailwind

Com Aplicar Estats Actius Enfocats I Actius Amb El Gruix De La Decoracio Del Text A Tailwind



Mentre es crea llocs basats en contingut, sovint hi ha un requisit que el programador ressalti les terminologies vitals per a una millor experiència i comprensió de l'usuari. En aquest cas, el ' Gruix de la decoració del text Entra en vigor la utilitat de Tailwind que es pot incorporar de manera personalitzada segons el disseny del lloc.

Aquest tutorial explica els continguts següents:

Com aplicar els estats actius, enfocats i actius amb el gruix de la decoració del text a Tailwind?

El ' Decoració del text Gruix ' es pot aplicar amb aquests estats utilitzant l'estat objectiu i el ' text-decoració-gruix ” propietat seguida del valor de gruix objectiu en píxels. La integració d'aquests enfocaments canvia el gruix de la decoració del text (en píxels) quan es passa el ratolí, l'element està enfocat o l'element està actiu. Aquests píxels poden ser ' 1px ”, “ 2 píxels ”, “ 4 píxels ' o ' 8 píxels ”. És tal que com més píxels, més gruix és.





Exemple 1: Aplicació del gruix de la decoració del text amb l'estat 'hover'.

Aquest exemple aplica el ' text-decoració-gruix » propietat amb el « flotar ” estat per establir el gruix al passar el ratolí:





< html >

< cap >

< meta conjunt de caràcters = 'utf-8' >

< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >

< guió src = 'https://cdn.tailwindcss.com' >< / guió >< / cap >

< cos >

< àrea de text classe = 'subratlla el cursor: decoració-4' > James és puntual < / àrea de text >

< / cos >

< / html >

En aquest fragment de codi, incloeu la ruta CDN dins de l'etiqueta '' per fer ús de les funcionalitats de Tailwind. Després d'això, dins del ' <àrea de text> ', especifiqueu el ' flotar 'estat juntament amb el' aplicat text-decoració-gruix ” propietat que estableix el gruix de la decoració des del subratllat predeterminat fins a un gruix més gran de “4” píxels en passar el cursor del ratolí.



Sortida



Aquesta sortida implica que el gruix de la decoració del text, és a dir, el subratllat, s'estableix en conseqüència.



Exemple 2: Aplicació del gruix de la decoració del text amb l'estat 'focus'.

El codi d'exemple següent implementa el gruix de la decoració del text a un valor de píxel objectiu quan l'element es centra mitjançant el ' Tab clau ”:



< html >

< cap >

< meta conjunt de caràcters = 'utf-8' >

< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >

< guió src = 'https://cdn.tailwindcss.com' >< / guió >< / cap >

< cos >

< àrea de text classe = 'subratlla decoració-1 focus:decoració-4' >James és puntual< / àrea de text >

< / cos >

< / html >

En aquest bloc de codi, repetiu els enfocaments comentats per incorporar la ruta CDN i el ' <àrea de text> ” element. Ara, especifiqueu el gruix predeterminat juntament amb el gruix de la transició, és a dir, '4' píxels amb el ' focus ” estat per aplicar el canvi a l'estat activat.

Nota: El valor predeterminat ' subratllar ' i la ' subratlla la decoració-1 ” Les propietats donen el mateix resultat.

Sortida

A partir d'aquesta sortida, es pot comprovar que el gruix de la decoració del text es fa la transició en conseqüència.

Exemple 3: Aplicació del gruix de la decoració del text amb l'estat 'actiu'.

En aquest fragment de codi, el gruix de la decoració del text es modifica quan l'element està actiu:



< html >

< cap >

< meta conjunt de caràcters = 'utf-8' >

< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >

< guió src = 'https://cdn.tailwindcss.com' >< / guió >< / cap >

< cos >

< àrea de text classe = 'subratlla decoració-1 activa: decoració-8' >James és puntual< / àrea de text >

< / cos >

< / html >

D'acord amb aquestes línies de codi, també incorporeu el camí CDN i l'element “