Add touch-action utilities (#5603)

Co-Authored-By: Mattèo Gauthier <matteo.gauthier@gmail.com>

Co-authored-by: Mattèo Gauthier <matteo.gauthier@gmail.com>
This commit is contained in:
Adam Wathan 2021-09-26 09:41:36 -04:00 committed by GitHub
parent 2959b83f71
commit e602a3dca7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 0 deletions

View File

@ -775,6 +775,21 @@ export default {
cursor: createUtilityPlugin('cursor'),
touchAction: ({ addUtilities }) => {
addUtilities({
'.touch-auto': { 'touch-action': 'auto' },
'.touch-none': { 'touch-action': 'none' },
'.touch-pan-x': { 'touch-action': 'pan-x' },
'.touch-pan-left': { 'touch-action': 'pan-left' },
'.touch-pan-right': { 'touch-action': 'pan-right' },
'.touch-pan-y': { 'touch-action': 'pan-y' },
'.touch-pan-up': { 'touch-action': 'pan-up' },
'.touch-pan-down': { 'touch-action': 'pan-down' },
'.touch-pinch-zoom': { 'touch-action': 'pinch-zoom' },
'.touch-manipulation': { 'touch-action': 'manipulation' },
})
},
userSelect: ({ addUtilities }) => {
addUtilities({
'.select-none': { 'user-select': 'none' },

View File

@ -299,6 +299,12 @@
.cursor-pointer {
cursor: pointer;
}
.touch-pan-y {
touch-action: pan-y;
}
.touch-manipulation {
touch-action: manipulation;
}
.select-none {
user-select: none;
}

View File

@ -39,6 +39,7 @@
<div class="clear-left"></div>
<div class="container"></div>
<div class="cursor-pointer"></div>
<div class="touch-pan-y touch-manipulation"></div>
<div class="hidden inline-grid"></div>
<div class="divide-gray-200"></div>
<div class="divide-opacity-50"></div>