Tailwind CSS: Targeting Mouse Devices Only with `mouse-only:`

When building responsive websites and web apps, it’s important to think about how users will interact with your content. Tailwind CSS makes it easy to create styles for different device types and screen sizes, but what if you want to target only mouse users? Tailwind CSS doesn’t come with a built-in way to do this, but with a simple customization, you can create a custom variant for mouse-only devices.

Why Target Mouse Devices Only?

Not every device is used the same way! Some are controlled by touch, while others use a mouse or trackpad. There are scenarios where it makes sense to create styles that apply only to users with precise pointing devices. For instance, if you have hover effects that wouldn’t work well on touchscreens, you might want to restrict them to mouse users. I recently had to address a situation like this, where hover animations were interfering with mobile users' experience while scrolling.

How to Set Up the mouse-only Variant

To get started, you’ll need to update your tailwind.config.js file and add a custom mouse-only variant. This tells Tailwind to apply specific styles only on devices where a mouse is available.

Here’s how you do it:

1. Open the tailwind.config.js file in your project.
2. Add a custom plugin to define the mouse-only variant.

Here’s an example configuration:

const { plugin } = require('postcss')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    function ({ addVariant }) {
      addVariant('mouse-only', '@media screen and (pointer: fine)')
    },
  ],
}

How It Works

The addVariant function adds a new variant called mouse-only. This variant uses a media query with @media screen and (pointer: fine), which is typically true for devices like laptops and desktops with a mouse or a precise trackpad.

Using the mouse-only Variant

After adding this to your tailwind.config.js, you can start using mouse-only: in your CSS classes. Here’s an example of how I applied it to a Link component to create complex animations that only trigger on devices with a pointer, like a mouse:

<Link
  href={`/expos/${expo.slug}`}
  key={expo.slug}
  className="group mouse-only:hover:p-24 mouse-only:transition-[padding, opacity] mouse-only:duration-1000 mouse-only:ease-in-out opacity-90 hover:opacity-100"
>
  <img
    src={expo.image}
    alt={`Expo cover for the expo ${expo.title}`}
    width={480}
    height={480}
    className="mouse-only:lg:scale-75 mouse-only:group-hover:scale-125 mouse-only:transition-transform mouse-only:duration-1000 mouse-only:ease-in-out"
  />
  <div className="flex flex-col gap-4">
    <span className="mouse-only:group-hover:translate-x-12 mouse-only:transition-transform mouse-only:duration-[1.25s] mouse-only:delay-150 mouse-only:ease">
      <h3 className="mouse-only:group-hover:tracking-wider mouse-only:transition-[letter-spacing] mouse-only:duration-[2s] mouse-only:delay-150 mouse-only:ease-in-out">
        {expo.title}
      </h3>
    </span>
    <p className="mouse-only:group-hover:translate-x-12 mouse-only:transition-transform mouse-only:duration-[1.25s] mouse-only:delay-75 mouse-only:ease-in-out">
      {formatExhibitionDateRange(startingDate, endingDate)}
    </p>
  </div>
  <span className="w-[10vw] mouse-only:group-hover:w-[0vw] mouse-only:transition-[width] mouse-only:duration-[1.25s]"></span>
</Link>

See It in Action

If you’d like to see this in action, you can check it out live on my website, Atelier Verbeke. Here, I’ve implemented the mouse-only variant to enhance the user experience for desktop users with pointer devices. This ensures that touch users have a smooth browsing experience, free from hover-triggered animations while scrolling.

Wrapping Up

Using this custom mouse-only variant, you can make your site more responsive and intuitive for mouse users while ensuring that touch-based users have a smooth experience too. With Tailwind, adding device-specific styles is easy and keeps your CSS organized and efficient.