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.

[iamandrewluca]

One more solution now with JIT mode, just add after:absolute after:inset-0 to your link

<div class="realtive">
  <a class="after:absolute after:inset-0" href="/link">
    Link
  </a>
</div>

[IbraheemTuffaha]

One more solution now with JIT mode, just add after:absolute after:inset-0 to your link

<div class="realtive">
  <a class="after:absolute after:inset-0" href="/link">
    Link
  </a>
</div>

That solves it!
Thank you.
Can you edit your response to have the outer div class as "relative" instead of "realtive"? so people don't fall for it :)