Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
tailwindcss-device
Advanced tools
TailwindCSS plugin to add variants for input device detection using `@media` queries
TailwindCSS plugin to add variants for input device detection using @media
queries
pnpm
pnpm add -D tailwindcss-device
npm
npm i -D tailwindcss-device
yarn
yarn add -D tailwindcss-device
tailwind.config.js
plugins section:const device = require("tailwindcss-device")
module.exports = {
plugins: [
device,
// ...
// or with custom prefix:
deivce({prefix: "device"})
]
}
<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>
.hidden {
display: none;
}
@media (pointer: coarse) {
.device-touch\:block {
display: block;
}
}
@media (pointer: fine) or (pointer: none) {
.device-desktop\:block {
display: block;
}
}
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 |
any-pointer
media feature documentation on MDNpointer
media feature documentation on MDN0.3.0
5d0d342
Thanks @octet-stream! - Drop Node 16. Minimal required version is 18 from now on.
5d0d342
Thanks @octet-stream! - Use tsup instead of microbundle to build project. This allows to generate proper and separate set of types for cjs and esm output.
FAQs
TailwindCSS plugin to add variants for input device detection using `@media` queries
We found that tailwindcss-device demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.