Как использовать псевдокласс :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:, когда мы хотим, чтобы элементы также реагировали на наведение мыши на мобильные устройства.