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";
- Or use its JavaScript version via
@plugin
directive:
@import "tailwindcss";
@plugin "tailwindcss-device";
With v3
- Add plugin to your
tailwind.config.js
plugins section:
import device from "tailwindcss-device"
export default {
plugins: [
device,
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
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