Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Touch Action

Quiz

Tailwind CSS Touch Action is a set of predefined classes that control how touch interactions, such as scrolling and zooming, are handled on a web page.

Tailwind CSS Touch Action Classes

Below is a list of Tailwind CSS Touch Action classes for controlling touch behavior.

Class	CSS Properties
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;

Functionality of Tailwind CSS Touch Action Classes

touch-auto: Allows normal touch interactions like tapping and scrolling.
touch-none: Disables all touch interactions, so users can't use touch actions on the element.
touch-pan-x: Allows horizontal swipes, letting users move left or right.
touch-pan-left: Restricts touch to moving or scrolling only to the left.
touch-pan-right: Restricts touch to moving or scrolling only to the right.
touch-pan-y: Allows vertical swipes, letting users move up or down.
touch-pan-up: Restricts touch to moving or scrolling only upwards.
touch-pan-down: Restricts touch to moving or scrolling only downwards.
touch-pinch-zoom: Allows zooming in and out by pinching with two fingers.
touch-manipulation: Allows touch actions like moving and zooming with few limits.

Tailwind CSS Touch Action Class Examples

Below are examples of Tailwind CSS Touch Action classes, which show how to control various touch behaviors such as scrolling, pinching, and panning on a web page.

Understanding Touch Action with Tailwind CSS

This example shows how the touch-auto and touch-none classes in Tailwind CSS affect touch interactions. The first image allows scrolling and zooming gestures, while the second image does not respond to touch gestures.

Example

  
<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
        Try scrolling these images on a touchscreen.
    </h3>
    <div class="grid grid-cols-2 gap-4"> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: auto</h3>
            <div class="w-full h-60 overflow-auto touch-auto">
                <img class="w-[150%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
        </div>
 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: none</h3>
            <div class="w-full h-60 overflow-auto touch-none">
                <img class="w-[150%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
        </div>
    </div>
</body> 

</html>

Scrolling Directions with Touch Actions

This example shows how the touch-pan-x class allows horizontal scrolling (left and right) while restricting vertical scrolling, and the touch-pan-y class allows vertical scrolling (up and down) while restricting horizontal scrolling, so you can move the image in only one direction on a touchscreen.

Example

<!DOCTYPE html>
<html lang="en">
<head> 
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
        Try scrolling these images on a touchscreen.
    </h3>
     <div class="grid grid-cols-2 gap-4"> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-x</h3>
            <div class="w-full h-60 overflow-auto touch-pan-up">
                <img class="w-[200%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image"/>
            </div>
        </div>
 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-y</h3>
            <div class="w-full h-60 overflow-auto touch-pan-down">
                <img class="w-[200%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
        </div>
    </div>
</body>

</html>

Tailwind CSS Pan-Up and Pan-Down

This example shows how the touch-pan-up class allows users to scroll images upwards, while the touch-pan-down class allows scrolling downwards, showing how touch interactions are limited to specific directions on a touchscreen.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
       Try scrolling these images on a touchscreen
    </h3>
    <div class="grid grid-cols-2 gap-4">
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-up</h3>
            <div class="w-full h-60 overflow-auto touch-pan-up">
                <img class="w-[200%] max-w-none h-auto" 
                            src="https://picsum.photos/600/400?random" 
                            alt="Placeholder Image" />
            </div>
            <p class="mt-2 text-sm">Scroll up</p>
        </div> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pan-down</h3>
            <div class="w-full h-60 overflow-auto touch-pan-down">
                <img class="w-[200%] max-w-none h-auto" 
                            src="https://picsum.photos/600/400?random" 
                            alt="Placeholder Image" />
            </div>
            <p class="mt-2 text-sm">Scroll down</p>
        </div>
    </div>
</body>

</html>

Pinch-Zoom and Default Touch Behavior with Tailwind CSS

This example demonstrates how the touch-pinch-zoom class enables zooming in and out with pinch gestures, while the touch-manipulation class allows for all standard touch interactions, including scrolling and zooming.

Example

<!DOCTYPE html>
<html lang="en">
<head>  
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-6">
        Tailwind CSS Touch Action
    </h1>
    <h3 class="underline font-bold mb-4">
        Try scrolling these images on a touchscreen.
    </h3>
    <div class="grid grid-cols-2 gap-4"> 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: pinch-zoom</h3>
            <div class="w-full h-60 overflow-auto touch-pinch-zoom">
                <img class="w-[150%] max-w-none h-auto" 
                    src="https://picsum.photos/600/400?random" 
                    alt="Placeholder Image" />
            </div>
            <p class="mt-2">Zoom with pinch.</p>
        </div>
 
        <div class="border border-red-300 p-2 relative">
            <h3 class="font-bold underline mb-2">Touch Action: manipulation</h3>
            <div class="w-full h-60 overflow-auto touch-manipulation">
                <img class="w-[150%] max-w-none h-auto" 
                            src="https://picsum.photos/600/400?random" 
                            alt="Placeholder Image" />
            </div>
            <p class="mt-2">Default touch gestures.</p>
        </div>
    </div>
    <p class="mt-4 text-center">Use the <strong>touch-*</strong>
        classes to control touch interactions.
    </p>
</body>

</html>

Print Page