Below, links in the sidebar lack sufficient padding. While
space-y-2
on the parent creates space *between* links, the links themselves are small and hard to click, especially on touch devices.
If link items (
<a>
tags) don't have their own padding (e.g.,
py-2 px-4
), they will be very thin. The
space-y-2
on the
nav
element only adds space *between* these thin items. This makes them difficult click targets.
This sidebar menu correctly applies padding (
py-2 px-4
) and
block
to each link, making them appropriately sized and easy to click.
By adding
py-2 px-4
(or similar padding) and
block
to each
<a>
tag, the clickable area of each link is increased significantly, improving usability. The
space-y-2
on the parent
nav
then correctly spaces these larger, padded items.