Skip to content

Instantly share code, notes, and snippets.

@junchaw
Created March 30, 2023 22:54
Show Gist options
  • Save junchaw/279b7311a8567d8daf4952c55bfd995f to your computer and use it in GitHub Desktop.
Save junchaw/279b7311a8567d8daf4952c55bfd995f to your computer and use it in GitHub Desktop.
A simple plugin to enable "hover" and "pointer" media query in TailwindCSS
plugin(function ({addVariant}) {
addVariant('hoverable-no', '@media (hover: none)')
addVariant('hoverable', '@media (hover: hover)')
addVariant('pointer-none', '@media (pointer: none)')
addVariant('pointer-find', '@media (pointer: fine)')
addVariant('pointer-coarse', '@media (pointer: coarse)')
addVariant('interact-mouse', '@media (hover: hover) and (pointer: fine)')
addVariant('interact-remote', '@media (hover: hover) and (pointer: coarse)')
addVariant('interact-stylus', '@media (hover: none) and (pointer: fine)')
addVariant('interact-finger', '@media (hover: none) and (pointer: coarse)')
}),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment