Interaction Media Queries

Description

Generates a series Tailwind media query classes to query a document based on the presence and accuracy of the user’s pointing device and whether it has the ability to hover over elements. For a better understanding, CSS Tricks has a great article about them: Touch Devices Should Not Be Judged By Their Size.

Setup

const { InteractionMediaQueries } = require('@area17/a17-tailwind-plugins');

module.exports = {
  ...
  plugins: [InteractionMediaQueries],
  ...
};

Output

This plugin will output prefix classes which generate media queries for:

• .pointer-course:foo generates @media (pointer: coarse){ ... }
• .pointer-fine:foo generates @media (pointer: fine){ ... }
• .pointer-none:foo generates @media (pointer: none){ ... }
• .hover-hover:foo generates @media (hover: hover){ ... }
• .hover-none:foo generates @media (hover: none){ ... }
• .any-pointer-course:foo generates @media (any-pointer: coarse){ ... }
• .any-pointer-fine:foo generates @media (any-pointer: fine){ ... }
• .any-pointer-none:foo generates @media (any-pointer: none){ ... }
• .any-hover-hover:foo generates @media (any-hover: hover){ ... }
• .any-hover-on-demand:foo generates @media (any-hover: on-demand){ ... }
• .any-hover-none:foo generates @media (any-hover: none){ ... }

Demo

The following, totally pointless example, will have a dark blue background colour on devices where the primary pointer device is a mouse or stylus and a light blue background colour on devices where the primary pointer device is something, such as a finger.