├── package.json
├── README.md
└── index.js


/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "tailwindcss-touch",
 3 |     "version": "1.0.1",
 4 |     "description": "A collection of touch variants for the tailwindcss framework",
 5 |     "main": "index.js",
 6 |     "scripts": {
 7 |         "test": "echo \"Error: no test specified\" && exit 1"
 8 |     },
 9 |     "repository": {
10 |         "type": "git",
11 |         "url": "git+https://github.com/steadfastcollective/tailwindcss-touch.git"
12 |     },
13 |     "keywords": [
14 |         "tailwind",
15 |         "tailwindcss",
16 |         "plugin",
17 |         "tailwindcss-plugin"
18 |     ],
19 |     "author": "steadfastcollective",
20 |     "license": "MIT",
21 |     "bugs": {
22 |         "url": "https://github.com/steadfastcollective/tailwindcss-touch/issues"
23 |     },
24 |     "homepage": "https://github.com/steadfastcollective/tailwindcss-touch#readme",
25 |     "devDependencies": {
26 |         "lodash": "^4.17.5"
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Tailwind Touch Plugin
 2 | 
 3 | 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.
 4 | 
 5 | ## Installation
 6 | 
 7 | Add this plugin to your project:
 8 | 
 9 | ```bash
10 | # Install via npm
11 | npm install --save-dev tailwindcss-touch
12 | ```
13 | 
14 | ## Usage
15 | 
16 | Add the tailwindcss-touch plugin to your plugins key in your tailwind.js config file. 
17 | 
18 | ```js
19 | plugins: [
20 |     require('tailwindcss-touch')(),
21 | ],
22 | 
23 | ```
24 | 
25 | The following variants are currently available:
26 | 
27 | ```css
28 | /* pointer-coarse */
29 | @media (pointer: coarse) { ... } 
30 | 
31 | /* pointer-fine */
32 | @media (pointer: fine) { ... }
33 | 
34 | /* pointer-none */
35 | @media (pointer: none) { ... }
36 | 
37 | /* hover-hover */
38 | @media (hover: hover) { ... }
39 | 
40 | /* hover-none */
41 | @media (hover: none) { ... }
42 | ```
43 | 
44 | 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:
45 | 
46 | ```js
47 | modules: {
48 |     shadows: ['responsive', 'hover', 'focus', 'hover-hover', 'hover-none'],
49 | },
50 | ```
51 | 
52 | 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:
53 | ```html
54 | <div class="hover-none:shadow-lg hover-hover:shadow">...</div>
55 | ```
56 | 
57 | ## Credits
58 | 
59 | - [Steadfast Collective](https://github.com/steadfastcollective)
60 | - [All Contributors](../../contributors)
61 | 
62 | ## License
63 | 
64 | The MIT License (MIT). Please see [License File](LICENSE.md) for more information.
65 | 
66 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | const postcss = require('postcss')
 2 | 
 3 | module.exports = function() {
 4 |     return function({ addVariant, e }) {
 5 |         addVariant('pointer-coarse', ({ container, separator }) => {
 6 |             const pointerCoarse = postcss.atRule({ name: 'media', params: '(pointer: coarse)' })
 7 |             pointerCoarse.append(container.nodes)
 8 |             container.append(pointerCoarse)
 9 |             pointerCoarse.walkRules(rule => {
10 |                 rule.selector = `.${e(`pointer-coarse${separator}${rule.selector.slice(1)}`)}`
11 |             })
12 |         })
13 |         addVariant('pointer-fine', ({ container, separator }) => {
14 |             const pointerFine = postcss.atRule({ name: 'media', params: '(pointer: fine)' })
15 |             pointerFine.append(container.nodes)
16 |             container.append(pointerFine)
17 |             pointerFine.walkRules(rule => {
18 |                 rule.selector = `.${e(`pointer-fine${separator}${rule.selector.slice(1)}`)}`
19 |             })
20 |         })
21 |         addVariant('pointer-none', ({ container, separator }) => {
22 |             const pointerNone = postcss.atRule({ name: 'media', params: '(pointer: none)' })
23 |             pointerNone.append(container.nodes)
24 |             container.append(pointerNone)
25 |             pointerNone.walkRules(rule => {
26 |                 rule.selector = `.${e(`pointer-none${separator}${rule.selector.slice(1)}`)}`
27 |             })
28 |         })
29 |         addVariant('hover-hover', ({ container, separator }) => {
30 |             const hoverHover = postcss.atRule({ name: 'media', params: '(hover: hover)' })
31 |             hoverHover.append(container.nodes)
32 |             container.append(hoverHover)
33 |             hoverHover.walkRules(rule => {
34 |                 rule.selector = `.${e(`hover-hover${separator}${rule.selector.slice(1)}`)}`
35 |             })
36 |         })
37 |         addVariant('hover-none', ({ container, separator }) => {
38 |             const hoverNone = postcss.atRule({ name: 'media', params: '(hover: none)' })
39 |             hoverNone.append(container.nodes)
40 |             container.append(hoverNone)
41 |             hoverNone.walkRules(rule => {
42 |                 rule.selector = `.${e(`hover-none${separator}${rule.selector.slice(1)}`)}`
43 |             })
44 |         })
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------