Skip to content

Instantly share code, notes, and snippets.

@innocenzi
Created October 26, 2019 18:41
Show Gist options
  • Save innocenzi/60e0d3a3d0706811487408cff3312d36 to your computer and use it in GitHub Desktop.
Save innocenzi/60e0d3a3d0706811487408cff3312d36 to your computer and use it in GitHub Desktop.
Tailwind touch-actions
.touch-none {
touch-action: none;
}
.touch-auto {
touch-action: auto;
}
.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;
}
export default function({ addUtilities, variants }) {
const actions = [ 'none', 'auto', 'pan-x', 'pan-left', 'pan-right', 'pan-y', 'pan-up', 'pan-down', 'pinch-zoom', 'manipulation' ];
const utilities = _.map(actions, action => ({
[`.touch-${action}`]: {
'touch-action': action
}
}));
addUtilities(utilities, variants('touchActions'),
);
},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment