@namchee/tailwindcss-pointer-queries v1.0.1

tailwindcss-pointer-queries

A TailwindCSS plugin that provides utilities for pointer media queries.

Installation

Install the plugin via your favorite package manager

# Using npm
npm install -D @namchee/tailwindcss-pointer-queries

# Using yarn
yarn add -D @namchee/tailwindcss-pointer-queries

# Using pnpm
pnpm add -D @namchee/tailwindcss-pointer-queries

Then include this plugin in the plugin section of tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // ...your other configurations
  plugins: [
    require('@namchee/tailwind-pointer-queries'),
    // ...other plugins
  ],
  // ...
}

Usage

Let's say that you want to hide certain elements in touchscreen devices. You can use pointer-coarse variant to detect whether the device is a touch-based device or not.

<button class="pointer-coarse:hidden">
  Look ma! I can't be touched!
</button>

However, you realized that this isn't what you want. What you really want is detecting whether the device has at least one touch inputs. In this case, you can use the pointer-any-coarse instead

<button class="pointer-coarse:hidden">
  Look ma! I can't be touched by those touch devices!
</button>

Classes

Below are the list of variant that this plugin generates:

License

This project is licensed under the MIT license