tailwindcss-hocus
TypeScript icon, indicating that this package has built-in type declarations

0.0.7 • Public • Published

tailwindcss-hocus

Adds hocus:, hocus-within:, group-hocus:, group-hocus-within:, peer-hocus:, peer-hocus-within: for lazy people like me who use similar styles for :hover and :focus states.

Installation

npm i -D tailwindcss-hocus
yarn add -D tailwindcss-hocus

Add the plugin to your tailwind.config.js

const hocusPlugin = require('tailwindcss-hocus')

/**
 * @type {import('tailwindcss').Config}
 */
module.exports = {
  // ...the rest of your config
  plugins: [hocusPlugin],
}

Usage

You can use the variant added by this plugin just like you would hover: or focus::

<button className="hocus:text-red-700">Click Me!</button>
.hocus\:text-red-700:hover,
.hocus\:text-red-700:focus {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity));
}

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.7
    830
    • latest

Version History

Package Sidebar

Install

npm i tailwindcss-hocus

Weekly Downloads

830

Version

0.0.7

License

MIT

Unpacked Size

5.19 kB

Total Files

8

Last publish

Collaborators

  • soorria