@windicss/plugin-interaction-variants

    1.0.0 • Public • Published

    @windicss/plugin-interaction-variants

    Installation

    npm install --save-dev @windicss/plugin-interaction-variants

    Usage

    // tailwind.config.js
    module.exports = {
      theme: {
        backgroundColor: {
          'black': 'black',
        },
      },
      variants: {
        backgroundColor: ['group-focus-within', 'group-focus-visible', 'group-active', 'group-visited', 'group-disabled', 'hocus', 'group-hocus', 'can-hover', 'no-hover'],
      },
      plugins: [
        require('@windicss/plugin-interaction-variants'),
      ],
    };

    The above configuration would generate the following CSS:

    .bg-black {
      background-color: black;
    }
    
    .group:focus-within .group-focus-within\:bg-black {
      background-color: black;
    }
    
    .group:focus-visible .group-focus-visible\:bg-black {
      background-color: black;
    }
    
    .group:active .group-active\:bg-black {
      background-color: black;
    }
    
    .group:visited .group-visited\:bg-black {
      background-color: black;
    }
    
    .group:disabled .group-disabled\:bg-black {
      background-color: black;
    }
    
    .hocus\:bg-black:hover, .hocus\:bg-black:focus {
      background-color: black;
    }
    
    .group:hover .group-hocus\:bg-black, .group:focus .group-hocus\:bg-black {
      background-color: black;
    }
    
    @media (hover: hover) {
      .can-hover\:bg-black {
        background-color: black;
      }
    }
    
    @media (hover: none) {
      .no-hover\:bg-black {
        background-color: black;
      }
    }

    Install

    npm i @windicss/plugin-interaction-variants

    DownloadsWeekly Downloads

    22

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    3.79 kB

    Total Files

    4

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar