hitslop-<number> for increasing the clickable area of elements, typically for mobile devices

[jtannas]

Based on the tips contained in Build UIs that don't suck #3: What are these, buttons for ants?

Naming inspired by the property from React Native: https://reactnative.dev/docs/pressable#hitslop

Sample Usage:

<button type="button" className="w-fit p-2 pointer-crude:hitslop-3">
	My Button
</button>

Rough idea for the CSS:

.hitslop-<number> {
	position: relative;
}
.hitslop-<number>::before {
	content: "";
	position: absolute;
	width: calc(100% + var(--spacing) * 2 * <number>);
	height: calc(100% + var(--spacing) * 2 * <number>);
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}

Possible Issues:

• affects the position property of the element
• not in line with "atomic classes" typical of Tailwind

[jtannas]

alternate idea: since the human interface guidelines suggest 48x48 pixels as the minimum touch area, people can use a non-Tailwind class for those dimensions.

.touch-appropriate {
	position: relative;
}
.touch-appropriate::before {
	content: "";
	position: absolute;
	width: 48px;
	height: 48px;
	top: 50%;
	left: 50%;
	translate: -50% -50%;
}