windicss-media-interaction
v1.1.1
Published
Windi CSS plugin for add media interaction variants
Downloads
8
Maintainers
Readme
Windi CSS Plugin for Interaction Media Features
This plugin adds support for Interaction Media Features
for any property in your Windi CSS project and an enhanced group-hover
.
Installation
Using NPM:
npm i -D windicss-media-interaction
Using PNPM:
pnpm add -D windicss-media-interaction
Add the plugin to your Windi config file.
plugins: [require('windicss-media-interaction')]
Usage
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)
|
Adding variants:
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'
]
}
}
Examples
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));
}
}
Resources
If you are looking to use other variants see @windicss/plugin-interaction-variants.
Knowledge
Awesome article about Interaction Media Features:
https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/
Documentation about each media feature:
Credits
This plugin was inspired by tailwindcss-touch.
License
This project use the MIT License. Please see License File for more information.