https://github.com/octet-stream/tailwindcss-device
TailwindCSS plugin to add variants for input device detection using `@media` queries
https://github.com/octet-stream/tailwindcss-device
media-queries postcss tailwindcss tailwindcss-plugin
Last synced: about 2 months ago
JSON representation
TailwindCSS plugin to add variants for input device detection using `@media` queries
- Host: GitHub
- URL: https://github.com/octet-stream/tailwindcss-device
- Owner: octet-stream
- License: mit
- Created: 2023-03-29T21:37:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-29T20:15:58.000Z (3 months ago)
- Last Synced: 2025-03-03T03:34:04.557Z (about 2 months ago)
- Topics: media-queries, postcss, tailwindcss, tailwindcss-plugin
- Language: TypeScript
- Homepage: https://npmjs.com/package/tailwindcss-device
- Size: 569 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: license
Awesome Lists containing this project
README
# tailwindcss-device
TailwindCSS plugin to add variants for input device detection using [`@media` queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries)
## Installation
pnpm
```sh
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:
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:
```html
Hello, I'm visible on smartphones and tables!
Hello, I'm visible on computer with mouse!
```
3. The result will look like this:
```css
.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](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) reference documentation on MDN
* [Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) documentation on MDN
* [`any-pointer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/any-pointer) media feature documentation on MDN
* [`pointer`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) media feature documentation on MDN