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

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?

20.08.2023 18:21

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

20.08.2023 17:46

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox

19.08.2023 18:39

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

19.08.2023 17:22

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!

Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️

18.08.2023 20:33

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL

14.08.2023 14:49

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.