npm

Need private packages and team management tools?Check out npm Orgs. »

tailwindcss-interaction-variants

2.2.0 • Public • Published

Interaction Variants Plugin for Tailwind CSS

Installation

npm install tailwindcss-interaction-variants

Usage

// tailwind.config.js
{
  theme: {
    backgroundColor: {
      'black': 'black',
    },
  },
  variants: {
    backgroundColor: ['hocus', 'group-hocus', 'group-focus', 'group-active'],
  },
  plugins: [
    require('tailwindcss-interaction-variants')(),
  ],
}

The above configuration would generate the following CSS:

.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;
}
 
.group:focus .group-focus\:bg-black {
  background-color: black;
}
 
.group:active .group-active\:bg-black {
  background-color: black;
}

Keywords

none

install

npm i tailwindcss-interaction-variants

Downloadsweekly downloads

147

version

2.2.0

license

ISC

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability