tailwindcss-device

tailwindcss-device

TailwindCSS plugin to add variants for input device detection using @media queries

Installation

pnpm

pnpm add -D tailwindcss-device

npm

npm i -D tailwindcss-device

yarn

yarn add -D tailwindcss-device

Usage

The plugin comes in two versions: One is CSS and meant for tailwind

With v4

There're two options for v4:

• Add plugin to your tailwind.css file using the @import directive, like this:

@import "tailwindcss";

@import "tailwindcss-device"; /* <- This will import CSS version of the plugin */

• Or use its JavaScript version via @plugin directive:

@import "tailwindcss";

@plugin "tailwindcss-device"; /* <- This will use legacy JavaScript version */

With v3

• Add plugin to your tailwind.config.js plugins section:

import device from "tailwindcss-device"

export default {
  plugins: [
    device,
    // ...

    // or with custom prefix:
    deivce({prefix: "device"})
  ]
}

• And then prefix utilities using available variants:

<div class="border border-black rounded-md device-touch:rounded-lg">
  <div class="hidden device-touch:block">
    Hello, I'm visible on smartphones and tables!
  </div>
  <div class="hidden device-desktop:block">
    Hello, I'm visible on computer with mouse!
  </div>
<div>

• The result will look like this:

.hidden {
  display: none;
}

@media (pointer: coarse) {
  .device-touch\:block {
    display: block;
  }
}

@media (pointer: fine) or (pointer: none) {
  .device-desktop\:block {
    display: block;
  }
}

Available variants

Name	Target
touch	Devices with touchscreen as primary input method (e.g smartphones and tablets)
desktop	Computers with a mouse
desktop-touch	Computers with touch input device
desktop-any	Computers with or without touch input device

Useful links

• Media queries reference documentation on MDN
• Using media queries documentation on MDN
• any-pointer media feature documentation on MDN
• pointer media feature documentation on MDN