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: 10 days 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 (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-05-13T17:36:46.000Z (9 months ago)
• Last Synced: 2025-01-09T15:58:44.628Z (15 days ago)
• Topics: media-queries, postcss, tailwindcss, tailwindcss-plugin
• Language: TypeScript
• Homepage: https://npmjs.com/package/tailwindcss-device
• Size: 384 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 2
• 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries) queries

## Installation

pnpm

```sh

pnpm add -D tailwindcss-device

```

npm

```

npm i -D tailwindcss-device

```

yarn

```

yarn add -D tailwindcss-device

```

### Usage

1. Add plugin to your `tailwind.config.js` plugins section:

```ts

const device = require("tailwindcss-device")

module.exports = {

  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