Adding plugins for pointer-coarse and pointer-fine variants to tailwindcss

There is a super quick way of adding media variants (and plugins in general) to your tailwindcss setup.

Go to your tailwind.config.js and add the import

const plugin = require("tailwindcss/plugin");

or, alternatively

import plugin from 'tailwindcss/plugin'

Then, add the following to your configuration:

plugins: [
  plugin(function ({ addVariant }) {
    addVariant("pointer-coarse", "@media (pointer: coarse)");
    addVariant("pointer-fine", "@media (pointer: fine)");
  }),
]

Now you can do something like in the below example, where the indication of a keyboard navigation is hidden for devices that only have a coarse pointer device (your finger).

<div class="text-sm whitespace-nowrap">
  <span>Newer post</span><span class="pointer-coarse:hidden"> <kbd>-</kbd></span>
</div>

 Note

For the above example it´s assumed you do not have a physical keyboard when you have a coarse pointer device. Unfortunately it is not possible to detect with a media query if a physical keyboard is attached to your computer. A fine pointing device (your mouse, a touchpad) increases chances of having a physical keyboard.