Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне сэкономил. Но вы здесь не для того, чтобы читать о моем мнении о Tailwind.
В своих проектах, при использовании SCSS, я всегда включаю один миксин, который помогает мне не использовать псевдокласс :hover, когда отсутствует самое важное для наведения - курсор.
Использование этого миксина выглядит следующим образом:
Но когда я перешел на Tailwind, я упустил эту возможность. В итоге, когда пользователь прокручивал страницу на мобильном устройстве, у меня были элементы, меняющие цвет фона, который оставался неизменным, пока пользователь не нажимал на другое место. Это просто не очень приятно. Конечно, я мог бы использовать один из префиксов размера экрана, чтобы включить стилизацию :hover только на больших экранах(lg:hover:bg-black). Однако странное поведение вызывает не размер экрана, а курсор.
Я решил написать собственный вариант конфигурации Tailwind и в итоге обнаружил, что это довольно просто.
Во-первых, давайте потребуем метод plugin из библиотеки Tailwind в tailwind.config.js:
const plugin = require('tailwindcss/plugin')
Далее нам нужно добавить наш плагин в массив plugins:
Я решил назвать его mouse-hover, и вот пример его использования в реальном коде:
Это позволяет нам по-прежнему использовать оригинальный вариант hover:, когда мы хотим, чтобы элементы также реагировали на наведение мыши на мобильные устройства.
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.