Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including tailwindcss-interaction-variants with all npm packages installed. Try it out:

var tailwindcssInteractionVariants = require("tailwindcss-interaction-variants")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

tailwindcss-interaction-variants v2.2.0

Tailwind CSS plugin to add some missing interaction state variants

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;
}
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free