Ako použiť stavy po umiestnení kurzora myši, zaostrenie a aktívne stavy s hrúbkou dekorácie textu v službe Tailwind

Ako Pouzit Stavy Po Umiestneni Kurzora Mysi Zaostrenie A Aktivne Stavy S Hrubkou Dekoracie Textu V Sluzbe Tailwind



Pri vytváraní stránok založených na obsahu sa často vyžaduje, aby programátor zdôraznil dôležité terminológie pre lepšiu používateľskú skúsenosť a pochopenie. V takom prípade „ Hrúbka dekorácie textu ” v Tailwinde nadobudne účinnosť, ktorú možno začleniť vlastným spôsobom podľa rozloženia stránky.

Tento tutoriál vysvetľuje nasledujúci obsah:

Ako použiť umiestňovanie kurzora, zaostrenie a aktívne stavy s hrúbkou dekorácie textu v službe Tailwind?

' Dekorácia textu Hrúbka ” možno použiť s týmito stavmi využitím cieľového stavu a “ text-dekorácia-hrúbka ” vlastnosť, za ktorou nasleduje cieľová hodnota hrúbky v pixeloch. Integrácia týchto prístupov mení hrúbku dekorácie textu (v pixeloch) po umiestnení kurzora myši, zameranom prvku alebo aktívnom prvku. Tieto pixely môžu byť „ 1px ',' 2px ',' 4px “ alebo „ 8px “. Je to tak, že čím viac pixelov, tým väčšia je hrúbka.





Príklad 1: Použitie hrúbky dekorácie textu so stavom „vznášania“.

Tento príklad platí „ text-dekorácia-hrúbka ” nehnuteľnosť s “ vznášať sa ” stav na nastavenie hrúbky po umiestnení kurzora myši:





< html >

< hlavu >

< meta znakovú sadu = 'utf-8' >

< meta názov = 'výrez' obsahu = 'width=device-width, initial-scale=1' >

< skript src = 'https://cdn.tailwindcss.com' < / skript < / hlavu >

< telo >

< textarea trieda = 'podčiarknuť hover:decoration-4' > James je presný < / textarea >

< / telo >

< / html >

V tomto útržku kódu zahrňte cestu CDN do značky „“, aby ste mohli využívať funkcie Tailwind. Potom v rámci „