TailwindCSS plugin to add variants for input device detection using `@media` queries
npm install tailwindcss-deviceTailwindCSS plugin to add variants for input device detection using @media queries
pnpm
``sh`
pnpm add -D tailwindcss-device
npm
`
npm i -D tailwindcss-device
yarn
`
yarn add -D tailwindcss-device
The plugin comes in two versions: One is CSS and meant for tailwind
#### With v4
There're two options for v4:
1. Add plugin to your tailwind.css file using the @import directive, like this:
`css
@import "tailwindcss";
@import "tailwindcss-device"; / <- This will import CSS version of the plugin /
`
2. Or use its JavaScript version via @plugin directive:
`css
@import "tailwindcss";
@plugin "tailwindcss-device"; / <- This will use legacy JavaScript version /
`
#### With v3
1. Add plugin to your tailwind.config.js plugins section:
`ts
import device from "tailwindcss-device"
export default {
plugins: [
device,
// ...
// or with custom prefix:
deivce({prefix: "device"})
]
}
`
2. And then prefix utilities using available variants:
` 3. The result will look like this: @media (pointer: coarse) { @media (pointer: fine) or (pointer: none) { | Name | Target | * Media queries reference documentation on MDNhtml
Hello, I'm visible on smartphones and tables!
Hello, I'm visible on computer with mouse!
`css`
.hidden {
display: none;
}
.device-touch\:block {
display: block;
}
}
.device-desktop\:block {
display: block;
}
}Available variants
|---------------|--------------------------------------------------------------------------------|
| 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
* Using media queries documentation on MDN
* media feature documentation on MDNpointer` media feature documentation on MDN
*