Как применить состояния наведения, фокуса и активности с толщиной оформления текста в Tailwind

Kak Primenit Sostoania Navedenia Fokusa I Aktivnosti S Tolsinoj Oformlenia Teksta V Tailwind



При создании сайтов на основе контента программисту часто требуется выделить жизненно важную терминологию для лучшего взаимодействия с пользователем и его понимания. В таком случае « Толщина текстового оформления В Tailwind вступает в силу утилита, которую можно встроить в соответствии с макетом сайта.

В этом руководстве объясняется следующее содержание:

Как применить состояния наведения, фокуса и активности с толщиной оформления текста в Tailwind?

« Оформление текста Толщина » можно применить к этим состояниям, используя целевое состояние и « толщина текста-декорации », за которым следует целевое значение толщины в пикселях. Интеграция этих подходов изменяет толщину оформления текста (в пикселях) при наведении курсора мыши, на фокусируемом элементе или на активном элементе. Эти пиксели могут быть « 1 пиксель ', ' 2 пикселя ', ' 4 пикселя ' или ' 8 пикселей ». Это так: чем больше пикселей, тем больше толщина.





Пример 1: Применение толщины оформления текста с помощью состояния «наведение»

В этом примере применяется « толщина текста-декорации ” имущество с “ зависать ” для установки толщины при наведении курсора мыши:





< HTML >

< голова >

< мета кодировка '=' 'utf-8' >

< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >

< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >< / голова >

< тело >

< текстовая область сорт '=' 'подчеркнуть при наведении: украшение-4' > Джеймс пунктуален < / текстовая область >

< / тело >

< / HTML >

В этом фрагменте кода включите путь CDN в тег «», чтобы использовать функции Tailwind. После этого в рамках « <текстовая область> элемент, укажите элемент « зависать ” указать вместе с приложенным “ толщина текста-декорации Свойство, которое устанавливает толщину оформления от подчеркивания по умолчанию до увеличенной толщины в «4» пикселя при наведении курсора мыши.



Выход



Этот вывод подразумевает, что толщина оформления текста, т. е. подчеркивания, установлена ​​соответствующим образом.



Пример 2: Применение толщины оформления текста с состоянием «фокуса»

В следующем примере кода толщина оформления текста реализуется в соответствии со значением целевого пикселя после фокусировки элемента с помощью « Вкладка ' ключ:



< HTML >

< голова >

< мета кодировка '=' 'utf-8' >

< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >

< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >< / голова >

< тело >

< текстовая область сорт '=' 'подчеркнуть украшение-1 фокус: украшение-4' >Джеймс пунктуален< / текстовая область >

< / тело >

< / HTML >

В этом блоке кода повторите обсуждаемые подходы к включению пути CDN и « <текстовая область> элемент. Теперь укажите толщину по умолчанию вместе с толщиной перехода, т. е. «4» пикселя с « фокус » состояние, чтобы применить изменение к триггерному состоянию.

Примечание: По умолчанию ' подчеркнуть » и « подчеркнуть украшение-1 Свойства дают тот же результат.

Выход

Из этого вывода можно убедиться, что толщина оформления текста изменяется соответствующим образом.

Пример 3: Применение толщины оформления текста в «активном» состоянии

В этом фрагменте кода толщина оформления текста изменяется, когда элемент активен:



< HTML >

< голова >

< мета кодировка '=' 'utf-8' >

< мета имя '=' 'окно просмотра' содержание '=' 'ширина=ширина устройства, начальный масштаб=1' >

< сценарий источник '=' 'https://cdn.tailwindcss.com' >< / сценарий >< / голова >

< тело >

< текстовая область сорт '=' 'подчеркивание украшения-1 активно:декорация-8' >Джеймс пунктуален< / текстовая область >

< / тело >

< / HTML >

В соответствии с этими строками кода также добавьте путь CDN и элемент «