Изменение наведения в Tailwindcss
Я заметил, что :hover в Tailwindcss использует селектор наведения по умолчанию, который вызывает «зависание» состояний наведения на мобильных устройствах. Есть ли способ изменить функцию :hover, чтобы вместо этого выполнялось @media(hover:hover)?
@SethWarburton, в этом проблема, мобильные устройства не имеют состояния наведения, поэтому такой класс, как :hover, приведет к зависанию эффекта, когда пользователь нажимает кнопку и т. д. Я пытаюсь найти способ для Tailwind для реализации наведения с использованием @media(hover:hover) вместо обычного :hover, который вызывает указанную ошибку.
Я думаю, вы меня неправильно поняли. Я считаю, что эффект «зависания», который вы видите, связан с тем, что вы не установили подходящее состояние (например: фокус) для сенсорных устройств. Попробуйте применить нужные стили, используя правильный селектор.
Ответы 4
Адаптивные атрибуты, такие как sm: md: lg:, сделают эту работу за вас. См. пример в файле документы. Если вы не хотите использовать состояние наведения на мобильном устройстве. укажите, например: - sm:hover:no-underline
Проблема с этим подходом заключается в том, что для больших планшетов в горизонтальном представлении это те же точки останова, что и для рабочего стола, поэтому, если мне нужно наведение для рабочего стола, планшеты будут зависать в состояниях наведения, если я использую md или lg для их нацеливания. На данный момент @media( hover: hover ) кажется лучшим способом ориентироваться на устройства без мыши.
Ссылаясь на CSS-трюки css-tricks.com/touch-devices-not-juged-size, я думаю, что @media(hover: hover) — это решение.
Да, @KPK, вот почему мне интересно, есть ли у Tailwind @media(hover:hover) вместо обычного :hover для атрибута hover.
Я думаю, мы можем создать RFC для этой функции в GitHub.
Безусловно, самый простой способ — добавить собственное правило @media в класс правил @отзывчивый в попутном ветре. Как это сделать, описано в официальной документации попутного ветра в теме пользовательские медиа-запросы.
Просто добавьте это в свой конфиг:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'hover-hover': {'raw': '(hover: hover)'},
}
}
}
}
Это переводится как @media (hover: hover) { ... } в css. И вуаля, вы можете использовать hover-hover:text-red для отображения красного текста только для устройств, которые имеют возможность наведения.
Чтобы сделать свой собственный, оставьте «сырой» как есть и измените два других атрибута на любой медиа-запрос, который вы хотите. Первый атрибут hover-hover — это то, что вы используете при попутном ветре. Второй (hover: hover) — это то, как выглядит ваш фактический запрос css @media. Например: hover: none или pointer: coarse.
Теперь продолжайте и используйте hover-hover:hover:text-red для изменения состояния наведения.
Я обнаружил, что raw: '(hover: hover)' недостаточно, и в итоге использовал raw: '(hover: hover) and (pointer: fine)'
Вы можете легко создай свой собственный ховер, как показано ниже:
// styles.css
@variants hover {
.banana {
color: yellow;
}
}
Тогда используйте его как class='hover:banana'
это как бы делает вашу конфигурацию стиля распределенной по разным файлам, а это не то, что вы обычно хотите
Да, просто сгенерируйте вариант наведения с помощью плагина, который, помимо добавления псевдо-селектора :hover, также заключает все правила в правило @media(hover:hover):
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
const hoverPlugin = plugin(function({ addVariant, e, postcss }) {
addVariant('hover', ({ container, separator }) => {
const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover)' });
hoverRule.append(container.nodes);
container.append(hoverRule);
hoverRule.walkRules(rule => {
rule.selector = `.${e(`hover${separator}${rule.selector.slice(1)}`)}:hover`
});
});
});
module.exports = {
plugins: [ hoverPlugin ],
}
(pointer: fine) тоже должен быть там
const hoverRule = postcss.atRule({ name: 'media', params: '(hover: hover) and (pointer: fine)' }); - это работает
Спасибо за это! Единственная проблема, которую я обнаружил, - это когда селектор содержит символ точки или произвольные значения. Например: hover:translate-x-0.5 . часть неправильно закодирована. Вы знаете, как решить эту проблему? :)
Точка @MichaelGallego не допускается в именах идентификаторов CSS. Экранирование 0,5 как 0\2E5 должно работать, но я не пробовал и лично просто выбрал бы схему именования, которая больше соответствует действительным идентификаторам CSS...
Сенсорные устройства не имеют состояния наведения. Я предполагаю, что вместо этого вы смотрите на состояния :focus или :active. Tailwind также позволяет применять классы к этим псевдоселекторам, например.
focus:bg-blue-500.