Touch Action - Tailwindcss

import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "touch-action"; export const description = "Utilities for controlling how an element can be scrolled and zoomed on touchscreens.";

Examples

Basic example

Use utilities like touch-pan-y and touch-pinch-zoom to control how an element can be scrolled (panned) and zoomed (pinched) on touchscreens:

<Figure hint="Try panning these images on a touchscreen"> <Example> { <div className="grid gap-x-6 gap-y-14 font-mono font-bold sm:grid-cols-2"> <div className="flex flex-col items-center"> <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-auto</p> <div className="grid h-48 w-full touch-auto overflow-auto rounded-lg">

    </div>
  </div>
  <div className="flex flex-col items-center">
    <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-none</p>
    <div className="h-48 w-full touch-none overflow-auto rounded-lg">
      
    </div>
  </div>
  <div className="flex flex-col items-center">
    <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-pan-x</p>
    <div className="h-48 w-full touch-pan-x overflow-auto rounded-lg">
      
    </div>
  </div>
  <div className="flex flex-col items-center">
    <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">touch-pan-y</p>
    <div className="h-48 w-full touch-pan-y overflow-auto rounded-lg">
      
    </div>
  </div>
</div>

} </Example>

html

<!-- [!code classes:overflow-auto,touch-auto,touch-none,touch-pan-x,touch-pan-y] -->
<div class="h-48 w-full touch-auto overflow-auto ...">
  
</div>
<div class="h-48 w-full touch-none overflow-auto ...">
  
</div>
<div class="h-48 w-full touch-pan-x overflow-auto ...">
  
</div>
<div class="h-48 w-full touch-pan-y overflow-auto ...">
  
</div>

</Figure>

Responsive design