Skip to content
A collection of touch variants for the tailwindcss framework
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
index.js
package.json

README.md

Tailwind Touch Plugin

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
npm install --save-dev tailwindcss-touch

Usage

Add the tailwindcss-touch plugin to your plugins key in your tailwind.js config file.

plugins: [
    require('tailwindcss-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) { ... }

Enabling a variant on a module is just like enabling any other variant, locate the modules object and add the variants to the module you would like to enable touch capabilites for:

modules: {
    shadows: ['responsive', 'hover', 'focus', 'hover-hover', 'hover-none'],
},

Once the variant is enabled, using it is just like using any other variant, for example if you have a div which you would like to add a small shadow on touch enabled devices but a large shadow on non touch devices you would do it like so:

<div class="hover-none:shadow-lg hover-hover:shadow">...</div>

Credits

License

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

You can’t perform that action at this time.