Expand your hit areas

Introducing hit-area — a collection of Tailwind CSS utility classes for expanding the hit area of interactive elements across your codebase.

<button className="hit-area-6" />

By now, I'm sure some of you have heard of interaction dead zones. You may have even seen a post showing how to address them using a CSS pseudo-element, absolutely positioned on the interactive element to expand its hit area, all without impacting its layout.

But what I personally have yet to see is how to practically implement this across a real codebase.

That's what hit-area aims to solve.

I've been using this across my own codebases for over two years now, but I've never shared it publicly... until today.

Check out the launch video below, or dive into the installation and usage docs.

Installation

You can install the hit-area utilities using our shadcn registry:

npx shadcn@latest add https://bazza.dev/r/hit-area

They'll get added to your globals.css file, or whatever file you've configured in your components.json file for the tailwind.css property.

Usage

Basic

Use the hit-area-* utility to extend the hit area uniformly on all sides.

<button className="hit-area-6" />

Individual sides

To target specific sides, use hit-area-l-*, hit-area-r-*, hit-area-t-*, and hit-area-b-* utilities.

<button className="hit-area-l-4" />
<button className="hit-area-t-8" />
<button className="hit-area-b-6" />
<button className="hit-area-r-2" />

Horizontal/vertical

Use the axis shorthands hit-area-x-* and hit-area-y-* to extend the horizontal and vertical hit areas, respectively:

<button className="hit-area-x-4" />
<button className="hit-area-y-6" />

Combinations

You can combine all the above utility classes together—they'll stack and merge as you'd expect.

Custom values

Use the [<value>] syntax to use fully custom values, breaking out of the Tailwind CSS spacing system:

<button className="hit-area-[21px]" />
<button className="hit-area-l-[3rem]" />
<button className="hit-area-b-[calc(3vw-8px)]" />

Debugging

To visualize the hit area, use the hit-area-debug utility. It's actually what we've been using in all the previous examples!

<button className="hit-area-6 hit-area-debug" />

Examples

Checkboxes

Here's a practical example of using this hit-area utility class to expand the hit area for an interactive element: checkboxes in a table.

The checkbox is usually small, while the cell and/or row has additional padding to enhance content readability. This produces a sub-optimal user experience when quickly using the pointer to select rows.

We can expand the hit area of the checkbox so you can click anywhere on its cell to toggle selection.

Sidebar

Sidebars with gap-y-px have the same problem, especially when the rows are visually separated but meant to feel continuous.

That's it. Hope you enjoyed.