Я люблю 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:, когда мы хотим, чтобы элементы также реагировали на наведение мыши на мобильные устройства.
06.02.2023 13:41
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы, ввод/вывод файлов или анимация, JavaScript использует асинхронную модель программирования.
06.02.2023 12:02
Если вы ищете надежных разработчиков PHP рядом с вами, вот список лучших компаний по разработке PHP.
05.02.2023 12:54
📌Примечание: В этой статье я покажу вам, как скрапировать поиск Apple App Store и получить точно такой же результат, как на Apple iMac, потому что результаты поиска на Mac полностью отличаются от результатов на PC. На скриншотах ниже показана разница:
04.02.2023 13:59
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих областей. Это означает, что независимо от того, где они объявлены в вашем коде, они будут обрабатываться так, как если бы они были объявлены в верхней части...
04.02.2023 12:52
Angular - это фреймворк. Вы можете создать практически любое приложение без использования сторонних библиотек.