Introduction
Tutorial
Browser Support
Aspect Ratio
Position
Menu

Tailwind CSS Touch Action

The touch-action property controls how a user's touch input is processed within an application interface. It controls whether gestures like scrolling, zooming, and panning follow the browser’s default behavior or a custom behavior set in the code. This is especially useful for refining touch interactions and preventing unintended behaviors.

Tailwind CSS offers a set of utility classes that simplify the management of touch-action properties. In this guide, we’ll explore how to effectively use these utilities to optimize touch interactions in your Tailwind-powered projects.

ClassPropertiesExample
touch-autotouch-action: auto;<div className="touch-auto"></div>
touch-nonetouch-action: none;<div className="touch-none"></div>
touch-pan-xtouch-action: pan-x;<div className="touch-pan-x"></div>
touch-pan-lefttouch-action: pan-left;<div className="touch-pan-left"></div>
touch-pan-righttouch-action: pan-right;<div className="touch-pan-right"></div>
touch-pan-ytouch-action: pan-y;<div className="touch-pan-y"></div>
touch-pan-uptouch-action: pan-up;<div className="touch-pan-up"></div>
touch-pan-downtouch-action: pan-down;<div className="touch-pan-down"></div>
touch-pinch-zoomtouch-action: pinch-zoom;<div className="touch-pinch-zoom"></div>
touch-manipulationtouch-action: manipulation;<div className="touch-manipulation"></div>

Overview of Touch Action

Adding the Touch Action

To configure Touch Action utilities in Tailwind, use classes like touch-auto, touch-none, and touch-pan-*. These directly map to their respective values (auto, none, pan-*, etc.).

This is a live editor. Play around with it!
{/* Pan these images on a touchscreen */}
export default function TouchActionComponent() {
  return (
    <div className="h-screen w-screen flex flex-wrap gap-12 items-center justify-center">
      <div class="w-32 h-32 overflow-auto touch-auto">
        <p>Touch Auto</p>
        <img class="w-[150%] max-w-none h-auto" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" />
      </div>
      <div class="w-32 h-32 overflow-auto touch-none">
        <p>Touch None</p>
        <img class="w-[150%] max-w-none h-auto" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" />
      </div>
      <div class="w-32 h-32 overflow-auto touch-pan-x">
        <p>Touch Pan X</p>
        <img class="w-[150%] max-w-none h-auto" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" />
      </div>
      <div class="w-32 h-32 overflow-auto touch-pan-y">
        <p>Touch Pan Y</p>
        <img class="w-[150%] max-w-none h-auto" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" />
      </div>
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Tailwind allows you to conditionally apply the touch action classes on certain states like hover and focus. Use Tailwind's state modifiers like- hover, focus, etc. to apply the utility only when these states are active, e.g., hover:touch-auto.

This is a live editor. Play around with it!
{/* Pan this image on a touchscreen */}
export default function TouchActionComponent() {
  return (
    <div className="h-screen w-screen flex flex-col items-center justify-center">
      <p className="text-sm text-center px-9 pb-10 underline">Hover and focus on the image to see different pan action behaviors(on touchscreen)</p>
      <div tabindex="0" class="overflow-auto hover:touch-pan-left focus:touch-pan-right w-60 h-60">
        <img class="w-[150%] max-w-none h-auto" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" />
      </div>
    </div>
  );
}

Breakpoint Modifiers

Tailwind's breakpoint modifiers allow you to apply different touch-action utilities on different screen sizes. This ensures that your application is not only functional but also responsive. To add device-specific touch handling, prepend the modifiers like sm, md, lg, etc. to the touch-action utilities.

This is a live editor. Play around with it!
{/* Pan this image on a touchscreen */}
export default function TouchActionComponent() {
  return (
    <div className="h-screen w-screen flex flex-col items-center justify-center">
      <p className="text-sm text-center px-9 pb-10 underline">This image has different pan action behaviour on default and <code>md</code> screens</p>
      <div tabindex="0" class="overflow-auto touch-pan-left md:touch-pan-right w-60 h-60">
        <img class="w-[150%] max-w-none h-auto" src="https://images.unsplash.com/photo-1523275335684-37898b6baf30" />
      </div>
    </div>
  );
}

Real World Examples

Social Media Story Viewer

A horizontal scrollable story viewer with touch action for better control.

This is a live editor. Play around with it!
const StoryViewer = () => {
  const stories = [
    {
      id: 1,
      username: "travel_enthusiast",
      src: "https://images.unsplash.com/photo-1469474968028-56623f02e42e",
      alt: "Scenic mountain landscape",
      time: "2h ago"
    },
    {
      id: 2,
      username: "foodie_adventures",
      src: "https://images.unsplash.com/photo-1565299624946-b28f40a0ae38",
      alt: "Gourmet pizza",
      time: "3h ago"
    },
    {
      id: 3,
      username: "fitness_guru",
      src: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438",
      alt: "Workout session",
      time: "4h ago"
    },
    {
      id: 4,
      username: "art_creator",
      src: "https://images.unsplash.com/photo-1579783902614-a3fb3927b6a5",
      alt: "Abstract painting",
      time: "5h ago"
    },
    {
      id: 5,
      username: "tech_reviewer",
      src: "https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2",
      alt: "Latest gadget",
      time: "6h ago"
    },
    {
      id: 6,
      username: "nature_explorer",
      src: "https://images.unsplash.com/photo-1447752875215-b2761acb3c5d",
      alt: "Forest trail",
      time: "7h ago"
    }
  ];

  return (
    <div className="h-full bg-gray-900 p-4">
      <div className="touch-pan-x overflow-x-auto">
        <div className="flex space-x-4">
          {stories.map((story) => (
            <div key={story.id} className="flex-none w-20">
              <div className="ring-2 ring-pink-500 rounded-full p-0.5 mb-1">
                <img
                  src={story.src}
                  alt={story.alt}
                  className="w-full h-20 rounded-full object-cover touch-none"
                />
              </div>
              <p className="text-xs text-gray-300 truncate text-center">
                {story.username}
              </p>
              <p className="text-xs text-gray-500 text-center">{story.time}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default StoryViewer;

Color Picker

A touch-optimized color picker for e-commerce product variants.

This is a live editor. Play around with it!
const ColorPicker = () => {
  const products = [
    {
      id: 1,
      name: "Classic Cotton T-Shirt",
      colors: [
        { name: "Crimson Red", hex: "#DC2626" },
        { name: "Ocean Blue", hex: "#2563EB" },
        { name: "Forest Green", hex: "#059669" },
        { name: "Royal Purple", hex: "#7C3AED" },
        { name: "Sunny Yellow", hex: "#D97706" },
        { name: "Charcoal Gray", hex: "#4B5563" }
      ],
      price: "$29.99",
      src: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab",
      alt: "Cotton t-shirt"
    }
  ];

  return (
    <div className="h-full bg-white p-4">
      {products.map((product) => (
        <div key={product.id} className="space-y-4">
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-48 object-cover rounded-lg"
          />
          <h3 className="text-lg font-semibold">{product.name}</h3>
          <p className="text-gray-600">{product.price}</p>
          <div className="touch-manipulation">
            <p className="text-sm text-gray-500 mb-2">Available Colors:</p>
            <div className="flex flex-wrap gap-2">
              {product.colors.map((color) => (
                <button
                  key={color.name}
                  className="w-8 h-8 rounded-full border-2 border-gray-200 touch-none"
                  style={{ backgroundColor: color.hex }}
                  title={color.name}
                />
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default ColorPicker;

Music Player Controls

A touch-optimized music player interface with gesture controls.

This is a live editor. Play around with it!
const MusicPlayer = () => {
  const playlist = [
    {
      id: 1,
      title: "Midnight Dreams",
      artist: "Luna Echo",
      duration: "3:45",
      cover: "https://images.unsplash.com/photo-1563373982-1e9c0d68670f"
    },
    {
      id: 2,
      title: "Summer Breeze",
      artist: "The Wavelengths",
      duration: "4:12",
      cover: "https://images.unsplash.com/12/barley.jpg"
    },
    {
      id: 3,
      title: "Urban Rhythm",
      artist: "City Pulse",
      duration: "3:28",
      cover: "https://images.unsplash.com/photo-1496016943515-7d33598c11e6"
    },
    {
      id: 4,
      title: "Mountain High",
      artist: "Peak Climbers",
      duration: "5:02",
      cover: "https://images.unsplash.com/photo-1554629947-334ff61d85dc"
    },
    {
      id: 5,
      title: "Ocean Waves",
      artist: "Coastal Dreams",
      duration: "4:45",
      cover: "https://images.unsplash.com/photo-1514747975201-4715db583da9"
    },
    {
      id: 6,
      title: "Desert Wind",
      artist: "Sand Riders",
      duration: "3:56",
      cover: "https://images.unsplash.com/photo-1541256123332-c1c9d0a59dee"
    }
  ];

  return (
    <div className="h-screen bg-gray-900 p-4">
      <div className="space-y-4">
        <div className="touch-pan-y overflow-y-auto h-80">
          {playlist.map((song) => (
            <div
              key={song.id}
              className="flex items-center space-x-3 p-2 hover:bg-gray-800 rounded-lg"
            >
              <img
                src={song.cover}
                alt={`${song.title} cover`}
                className="w-12 h-12 rounded-md object-cover touch-none"
              />
              <div className="flex-1">
                <p className="text-white text-sm">{song.title}</p>
                <p className="text-gray-400 text-xs">{song.artist}</p>
              </div>
              <span className="text-gray-400 text-xs">{song.duration}</span>
            </div>
          ))}
        </div>
        <div className="touch-manipulation space-y-2">
          <div className="h-1 bg-gray-700 rounded-full">
            <div className="w-1/3 h-full bg-green-500 rounded-full" />
          </div>
          <div className="flex justify-between text-xs text-gray-400">
            <span>1:15</span>
            <span>3:45</span>
          </div>
        </div>
      </div>
    </div>
  );
};

export default MusicPlayer;

Gallery Viewer

A touch-enabled image gallery with pinch-zoom functionality disabled.

This is a live editor. Play around with it!
const GalleryViewer = () => {
  const gallery = [
    {
      id: 1,
      src: "https://images.unsplash.com/photo-1682687220566-5599dbbebf11",
      alt: "Architecture",
      category: "Architecture"
    },
    {
      id: 2,
      src: "https://images.unsplash.com/photo-1529419412599-7bb870e11810",
      alt: "Nature",
      category: "Nature"
    },
    {
      id: 3,
      src: "https://images.unsplash.com/photo-1682687220305-ce8a9ab237b1",
      alt: "Portrait",
      category: "Portrait"
    },
    {
      id: 4,
      src: "https://images.unsplash.com/photo-1546636889-ba9fdd63583e",
      alt: "Street",
      category: "Street"
    },
    {
      id: 5,
      src: "https://images.unsplash.com/photo-1574169208507-84376144848b",
      alt: "Abstract",
      category: "Abstract"
    },
    {
      id: 6,
      src: "https://images.unsplash.com/photo-1682687220640-9d3b11ca30e5",
      alt: "Minimalist",
      category: "Minimalist"
    }
  ];

  return (
    <div className="h-full bg-black p-4">
      <div className="grid grid-cols-2 gap-2 touch-pan-x touch-pan-y overflow-auto h-full">
        {gallery.map((image) => (
          <div key={image.id} className="relative group">
            <img
              src={image.src}
              alt={image.alt}
              className="w-full h-40 object-cover rounded-lg touch-none"
            />
            <div className="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity">
              <p className="text-white text-xs absolute bottom-2 left-2">
                {image.category}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default GalleryViewer;

Game Control Pad

A touch-optimized game control pad interface.

This is a live editor. Play around with it!
const GameController = () => {
  const games = [
    {
      id: 1,
      title: "Space Adventure",
      lastPlayed: "2h ago",
      progress: 75
    },
    {
      id: 2,
      title: "Dragon Quest",
      lastPlayed: "1d ago",
      progress: 45
    },
    {
      id: 3,
      title: "Racing Legends",
      lastPlayed: "3d ago",
      progress: 90
    },
    {
      id: 4,
      title: "Puzzle Master",
      lastPlayed: "1w ago",
      progress: 30
    },
    {
      id: 5,
      title: "Warrior's Path",
      lastPlayed: "2w ago",
      progress: 60
    },
    {
      id: 6,
      title: "City Builder",
      lastPlayed: "3w ago",
      progress: 85
    }
  ];

  return (
    <div className="h-screen bg-gray-800 p-4">
      <div className="mb-4 touch-pan-x overflow-x-auto">
        <div className="flex space-x-2">
          {games.map((game) => (
            <div
              key={game.id}
              className="flex-none w-32 bg-gray-700 rounded-lg p-2"
            >
              <h4 className="text-white text-sm font-medium">{game.title}</h4>
              <p className="text-gray-400 text-xs">{game.lastPlayed}</p>
              <div className="mt-2 h-1 bg-gray-600 rounded-full">
                <div
                  className="h-full bg-green-500 rounded-full"
                  style={{ width: `${game.progress}%` }}
                />
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="touch-none grid grid-cols-3 gap-4 mt-4">
        <button className="bg-gray-700 h-16 rounded-lg" />
        <button className="bg-gray-700 h-16 rounded-lg" />
        <button className="bg-gray-700 h-16 rounded-lg" />
        <button className="bg-gray-700 h-16 rounded-lg" />
        <button className="bg-gray-700 h-16 rounded-lg" />
        <button className="bg-gray-700 h-16 rounded-lg" />
      </div>
    </div>
  );
};

export default GameController;

Best Practices

Maintain Design Consistency

Consistent use of touch utilities like touch-none, touch-pan-x, and touch-pan-y helps create a predictable pattern of interactions for end-users. For instance, restricting touch gestures on modal overlays with touch-none while enabling scroll regions with touch-pan-y ensures usability without disrupting the UI's flow. By adhering to consistent patterns, you reduce user confusion, especially on interactive or gesture-driven interfaces.

Consistency should also extend to responsive designs. For example, you might want to enable touch-pan-x on mobile screens for swiping through carousels while allowing unrestricted interaction with touch-auto on larger screens. By leveraging Tailwind’s responsive modifiers like md:, lg:, and xl:, you can dynamically adapt touch behaviors while ensuring uniformity.

Leverage Utility Combinations

One of the strengths of Tailwind CSS lies in combining utilities to achieve complex designs. When using Touch Action utilities, it’s effective to mix them with Tailwind's layout and spacing classes for optimal results. For instance, combining overflow-hidden with touch-none prevents unwanted scroll behavior and ensures that touch gestures are properly constrained within predefined boundaries.

Additionally, extend these combinations thoughtfully across components. For example, a fullscreen gallery may use touch-pan-x for horizontal swipe navigation while nesting child elements constrained with touch-none to disable interactions on background elements.

Accessibility Considerations

Enhance Readability and Navigability

By carefully restricting gestures like panning and zooming with utilities such as touch-none or touch-auto, you can guide users toward the intended navigation flow. For example, a modal overlay using touch-none ensures that users cannot accidentally scroll the background content, keeping the focus on the modal itself.

By restricting undesired gestures, the interface maintains predictable behavior, reducing cognitive load. Incorporating overflow-hidden alongside touch-action utilities further avoids unexpected scroll breaks during interaction.

Support Accessible Interactive Elements

The application of touch-action utilities can directly improve the accessibility. Interactive components such as carousels, drawers, or sliders optimized with touch-pan-x or touch-pan-y allow seamless gesture-based interaction while reducing the potential for unintended outputs.

For forms and data inputs, combining Touch Action utilities with focused state styling ensures that users can navigate through fields effectively. A controlled vertical scroll region styled with touch-pan-y helps users move through lengthy forms with ease, while still preserving functionality for interactive elements like dropdowns or toggle switches.

Pointer EventsScroll Behavior

Resources

BlogDocsTailwindEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy