В этом руководстве объясняется следующее содержание:
- Как применить состояния наведения, фокуса и активности с толщиной оформления текста в 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 и элемент «
Выход
Как замечено, толщина оформления текста, т. е. подчеркивания, изменяется на «8» пикселей при щелчке внутри элемента, т. е. элемент становится соответствующим образом активным.
Заключение
« зависать ', ' фокус ' и ' активный ” состояния могут применяться с помощью “ толщина текста-декорации ” для установки толщины при наведении указателя мыши на элемент, при фокусировке элемента или при активации элемента соответственно. В этой статье показано, как применять наведение, фокус и активные состояния с толщиной оформления текста в Tailwind.