Tailwindcss: Adding a 'streched-link' option (make parent block clickable)

[paulhuisman]

First off, loving the framework so far, great work!

I was wondering if there's an option to add a class similar to stretched-link in Bootstrap 4.

https://getbootstrap.com/docs/4.3/utilities/stretched-link/

What it does is make the entire parent block clickable if you add the class to a link inside.

[AlexVipond]

I suggest making the parent block a an anchor or a button for accessibility purposes, then adding Tailwind's group class to create a hover group. Then, you can use the group-hover class on its children to customize hover styles when the parent is hovered: https://tailwindcss.com/docs/pseudo-class-variants/#group-hover

[hacknug]

I'd probably do what @AlexVipond suggested but if for some reason the link can't wrap the whole component, you can use @apply to create a new class that mimics Bootstrap's:

.stretched-link::after {
  content: "";
  @apply z-10 absolute inset-0 bg-transparent pointer-events-auto;
}

[adamwathan]

Hey @paulhuisman! I would solve this the way @AlexVipond mentioned 👍 I think adding a class like this to core would be a bit too much of a departure from the sorts of classes we currently provide, so if you wanted to create a stretched-link class I would do it in userland or via a plugin.