Skip to content
Tailwind CSS plugin to add some missing interaction state variants: hocus (hover & focus), group-hocus, group-focus, group-active, and visited
Branch: master
Clone or download
Latest commit 37f1cb2 May 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial commit Feb 15, 2019
.release-it.json Initial commit Feb 15, 2019
CHANGELOG.md Update dependencies + fix tests May 13, 2019
README.md Tweaks Apr 8, 2019
index.js Changes for Tailwind 1.0.0 Apr 7, 2019
package-lock.json Release 2.0.0 May 13, 2019
package.json Release 2.0.0 May 13, 2019
test.js Update dependencies + fix tests May 13, 2019

README.md

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', 'visited'],
  },
  plugins: [
    require('tailwindcss-interaction-variants')(),
  ],
}

The above configuration would generate the following classes:

.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;
}

.visited\:bg-black:visited {
  background-color: black;
}
You can’t perform that action at this time.