Skip to content
This repository has been archived by the owner on Aug 19, 2023. It is now read-only.

felixicaza/windicss-media-interaction

Repository files navigation

Windi CSS Plugin for Interaction Media Features

GitHub Actions Coverage Status Version

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.