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

CSS предлагает программистам различные среды для разработки динамических веб-страниц. Он более приятен, поскольку предоставляет все важные функции и инструменты в одном месте. Таким образом, вам не нужно использовать другие фреймворки. Фреймворк Tailwind в CSS является наиболее широко используемым, поскольку он экономит время пользователя на написание лишнего CSS.

В этом руководстве описывается использование наведения, фокуса и других состояний в Tailwind.

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

При разработке веб-страниц необходимо добавлять динамичные и привлекательные элементы для поддержания интерактивности с пользователями. Функции Tailwind можно использовать для создания интерактивных и динамических страниц без написания дополнительного пользовательского CSS. Некоторые функции — «наведение», «фокус» и «активность», которые помогают сделать дизайн более привлекательным.

Использование варианта Hover в HTML

Свойство hover используется для стилизации элемента HTML, когда пользователь наводит курсор мыши на определенный элемент. Это помогает представить плавный опыт.

Шаг 1. Примените свойство «hover» в HTML.
Создайте HTML-файл и примените свойство hover к какому-либо элементу кода. Чтобы иметь представление, взгляните на код, приведенный ниже:

В этом коде:

• Кнопка с названием « Наведите меня! » создается тегом кнопки.
• « bg-зеленый-500 » устанавливает зеленый цвет фона кнопки.
• « при наведении: bg-blue-500 » меняет цвет кнопки с зеленого на синий при наведении на нее мыши.
• Текст на кнопке имеет белый цвет» текст-белый ' и ' жирный шрифт » делает шрифт жирным.
• Форма кнопки установлена ​​на круглую « округлый ».

Шаг 2. Предварительный просмотр вывода
После выполнения приведенного выше кода окончательный вид будет выглядеть следующим образом:

Видно, что кнопка меняет цвет при наведении на нее курсора мыши.

Использование варианта фокуса в HTML

Свойство focus используется для стилизации HTML-элементов таким образом, чтобы, когда пользователь нажимает на элемент, он подсвечивается, чтобы привлечь внимание пользователя.

Шаг 1. Примените свойство Focus в HTML-коде.
Создайте HTML-файл и примените свойство фокуса к какому-либо желаемому элементу. Чтобы получить впечатление, рассмотрите код ниже:

В этом коде:

• « гибкий »класс создает гибкость.
• « оправдывать-центр » оправдывает выравнивание контента по центру.
• « центр предметов Класс ” настраивает объекты по центру экрана.
• « h-экран » устанавливает размер экрана в соответствии с областью просмотра.
• « bg-синий-200 » устанавливает синий цвет фона.
• Создается поле ввода текста.
• « фокус: bg-green-300 » меняет цвет поля ввода на зеленый при нажатии пользователем.
• « w-64 » устанавливает ширину 64 пикселя.
• « ч-10 » устанавливает высоту 10 пикселей.
• « px-4 » добавляет отступы в 4 пикселя сверху и слева.
• « ру-2 » добавляет отступы в 2 пикселя сверху и снизу.

Шаг 2. Предварительный просмотр свойства фокуса
Сохраните HTML-код и откройте созданную им веб-страницу. Затем переместите курсор на поле ввода и щелкните его, и произойдет следующее изменение:

Использование активного варианта в HTML

Это свойство используется для стилизации элементов для условий, когда пользователь динамически нажимает на элемент. Активное состояние — это период времени от стадии активации курсора до его отпущенного состояния.

Синтаксис

Определенное свойство CSS применяется к выбранному элементу.

Шаг 1. Примените активный вариант в HTML-коде.
Создайте HTML-файл и примените активное свойство к какому-либо элементу, который в приведенном ниже случае является кнопкой:

В этом коде:

• « bg-зеленый-600 » устанавливает зеленый цвет фона.
• « р-4 » добавляет отступ в 4 пикселя.
• « округлый-MD » делает форму кнопки округлой.
• « переход-преобразование «используется для преобразования кнопки на небольшой промежуток времени, который задается параметром « преобразование длительности-400 ».
• « активный:масштаб-110 » преобразует кнопку в больший размер.

Шаг 2. Предварительный просмотр вывода
Сохраните приведенный выше код в файле HTML и просмотрите созданную им веб-страницу. Веб-страница будет выглядеть так:

Видно, что размер кнопки увеличивается, когда ее удерживает мышь, и как только ее отпускают, она возвращается в исходное состояние.

Заключение

Чтобы использовать наведение, фокус и другие состояния в Tailwind, используйте предопределенные классы состояний, такие как «hover», и примените к ним некоторые свойства стиля, такие как изменение цвета, создание кольца фокусировки и т. д. Утилиты отображения используются для представления масштабируемого вывода. В этой статье продемонстрирован метод использования наведения, фокуса и других состояний в Tailwind.