This plugin adds support for Interaction Media Features for any property in your Windi CSS project and an enhanced group-hover.
Using NPM:
npm i -D windicss-media-interactionUsing PNPM:
pnpm add -D windicss-media-interactionAdd the plugin to your Windi config file.
plugins: [require('windicss-media-interaction')]Available variants:
| Variant name | CSS Media Query |
|---|---|
any-pointer-coarse |
@media (any-pointer: coarse) |
any-pointer-fine |
@media (any-pointer: fine) |
any-pointer-none |
@media (any-pointer: none) |
pointer-coarse |
@media (pointer: coarse) |
pointer-fine |
@media (pointer: fine) |
pointer-none |
@media (pointer: none) |
any-hover |
@media (any-hover: hover) |
any-hover-none |
@media (any-hover: none) |
hover-hover |
@media (hover: hover) |
hover-none |
@media (hover: none) |
group-any-coarse |
@media (any-pointer: coarse) |
group-any-fine |
@media (any-pointer: fine) |
group-any-pnone |
@media (any-pointer: none) |
group-pointer-coarse |
@media (pointer: coarse) |
group-pointer-fine |
@media (pointer: fine) |
group-pointer-none |
@media (pointer: none) |
group-any-hover |
@media (any-hover: hover) |
group-any-hnone |
@media (any-hover: none) |
group-hover-hover |
@media (hover: hover) |
group-hover-none |
@media (hover: none) |
You can add or extend many variants as you need to any property on your Windi config.
theme: {
variants: {
extend: {
backgroundColor: [
'any-pointer-coarse',
'any-pointer-fine',
'any-pointer-none',
'pointer-coarse',
'pointer-fine',
'pointer-none',
'any-hover',
'any-hover-none',
'hover-hover',
'hover-none',
'group-any-coarse',
'group-any-fine',
'group-any-pnone',
'group-pointer-coarse',
'group-pointer-fine',
'group-pointer-none',
'group-any-hover',
'group-any-hnone',
'group-hover-hover',
'group-hover-none'
],
textColor: [
'any-hover',
'hover-hover',
'group-any-coarse',
'group-pointer-fine',
'group-any-hover',
'group-hover-hover'
]
}
}
}Or overriding default variants:
theme: {
variants: {
// Only these variants will be generated for backgroundColor
backgroundColor: [
'any-pointer-coarse',
'any-pointer-fine',
'any-pointer-none',
'pointer-coarse',
'pointer-fine',
'pointer-none',
'any-hover',
'any-hover-none',
'hover-hover',
'hover-none',
'group-any-coarse',
'group-any-fine',
'group-any-pnone',
'group-pointer-coarse',
'group-pointer-fine',
'group-pointer-none',
'group-any-hover',
'group-any-hnone',
'group-hover-hover',
'group-hover-none'
],
// Only these variants will be generated for textColor
textColor: [
'any-hover',
'hover-hover',
'group-any-coarse',
'group-pointer-fine',
'group-any-hover',
'group-hover-hover'
]
}
}Basic:
<p class="text-blue-900 hover-hover:text-blue-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>Generated CSS
.text-blue-900 {
--tw-bg-opacity: 1;
background-color: rgba(30, 58, 138, var(--tw-bg-opacity));
}
@media (hover: hover) {
.hover-hover\:text-blue-500:hover {
--tw-text-opacity: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity));
}
}With parent state:
<section class="group">
<p class="group-hover-hover:text-blue-500">
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
</section>Generated CSS
@media (hover: hover) {
.group:hover .group-hover-hover\:text-blue-500 {
--tw-text-opacit: 1;
color: rgba(59, 130, 246, var(--tw-text-opacity));
}
}If you are looking to use other variants see @windicss/plugin-interaction-variants.
Awesome article about Interaction Media Features:
https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/
Documentation about each media feature:
This plugin was inspired by tailwindcss-touch.
This project use the MIT License. Please see License File for more information.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent