Minimum target size

[andrecasal]

On my apps I use custom min-w-tap and min-h-tap Tailwind classes that adapt to the user's pointer (24px for cursors and 44px for fingers).

tailwind.css:

/* Tap targets */
:root {
	--min-tap-target: 24px;
}

@media (pointer: coarse) {
	:root {
		--min-tap-target: 44px;
	}
}

tailwind.config.ts:

export default {
	...
	theme: {
		extend: {
			minWidth: {
				tap: 'var(--min-tap-target)',
			},
			minHeight: {
				tap: 'var(--min-tap-target)',
			},
		},
	},
	...
} satisfies Config

If you find this useful, I'd be happy to add this to this PR.

[kentcdodds]

👍 I'm on board with that. Let's make sure there's a code comment explaining what it's about. Thanks!