Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

tailwindcss-touch

Package Overview
Dependencies
Maintainers
2
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

tailwindcss-touch

A collection of touch variants for the tailwindcss framework

  • 1.0.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.9K
increased by0.52%
Maintainers
2
Weekly downloads
 
Created
Source

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.

Keywords

FAQs

Package last updated on 06 May 2019

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc