Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

RedDeveloper
18.03.2022 14:44
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)

Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне сэкономил. Но вы здесь не для того, чтобы читать о моем мнении о Tailwind.

В своих проектах, при использовании SCSS, я всегда включаю один миксин, который помогает мне не использовать псевдокласс :hover, когда отсутствует самое важное для наведения - курсор.

Открыть Github Gist

Использование этого миксина выглядит следующим образом:

Открыть Github Gist

Но когда я перешел на Tailwind, я упустил эту возможность. В итоге, когда пользователь прокручивал страницу на мобильном устройстве, у меня были элементы, меняющие цвет фона, который оставался неизменным, пока пользователь не нажимал на другое место. Это просто не очень приятно. Конечно, я мог бы использовать один из префиксов размера экрана, чтобы включить стилизацию :hover только на больших экранах(lg:hover:bg-black). Однако странное поведение вызывает не размер экрана, а курсор.

Я решил написать собственный вариант конфигурации Tailwind и в итоге обнаружил, что это довольно просто.

Во-первых, давайте потребуем метод plugin из библиотеки Tailwind в tailwind.config.js:

const plugin = require('tailwindcss/plugin')

Далее нам нужно добавить наш плагин в массив plugins:

Открыть Github Gist

Я решил назвать его mouse-hover, и вот пример его использования в реальном коде:

Открыть Github Gist

Это позволяет нам по-прежнему использовать оригинальный вариант hover:, когда мы хотим, чтобы элементы также реагировали на наведение мыши на мобильные устройства.

[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный

06.02.2023 13:41

JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы, ввод/вывод файлов или анимация, JavaScript использует асинхронную модель программирования.

Топ-10 компаний-разработчиков PHP
Топ-10 компаний-разработчиков PHP

06.02.2023 12:02

Если вы ищете надежных разработчиков PHP рядом с вами, вот список лучших компаний по разработке PHP.

Скраппинг поиска Apple App Store с помощью Python
Скраппинг поиска Apple App Store с помощью Python

05.02.2023 12:54

📌Примечание: В этой статье я покажу вам, как скрапировать поиск Apple App Store и получить точно такой же результат, как на Apple iMac, потому что результаты поиска на Mac полностью отличаются от результатов на PC. На скриншотах ниже показана разница:

Редкие достижения на Github ✨
Редкие достижения на Github ✨

05.02.2023 12:13

Редкая коллекция доступна в профиле на GitHub ✨

Подъем в javascript
Подъем в javascript

04.02.2023 13:59

Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих областей. Это означает, что независимо от того, где они объявлены в вашем коде, они будут обрабатываться так, как если бы они были объявлены в верхней части...

Улучшение генерации файлов Angular
Улучшение генерации файлов Angular

04.02.2023 12:52

Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.