Package Exports

tailwind-touch
tailwind-touch/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tailwind-touch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tailwind Touch Plugin

This is a fork of tailwindcss-touch, upgraded due to lack of maintenance on the original.

This plugin adds a collection of variants to allow fine grain control over how elements appear on touch and non touch devices, CSS Tricks does a great job of detailing how the underlying media queries work you can read more about this here: https://css-tricks.com/touch-devices-not-judged-size.

Installation

Add this plugin to your project:

Install via npm, yarn, pnpm, bun, etc.

npm install -D tailwind-touch

yarn add -D tailwind-touch

pnpm add -D tailwind-touch

bun add -D tailwind-touch

Usage

Add the tailwindcss-touch plugin to your css file, or tailwind.config.js if you're still using the js config.

@plugin 'tailwind-touch'

plugins: [
    require('tailwind-touch'),
],

The following variants are currently available:

/* pointer-coarse */
@media (pointer: coarse) { ... } 

/* pointer-fine */
@media (pointer: fine) { ... }

/* pointer-none */
@media (pointer: none) { ... }

/* hover-hover */
@media (hover: hover) { ... }

/* hover-none */
@media (hover: none) { ... }

Once the plugin is installed and added to the config, you can use it as you would any other media query modifier in Tailwind

<div class="pointer-coarse:hidden pointer-fine:flex">...</div>

Credits

License

The MIT License (MIT). Please see License File for more information.