How to reduce the clickable area for <a> with Tailwind CSS

user_17573449 0
Viewed 219

I'm using Tailwind CSS and I recently created a link using <a>, <p> and <div>. But the clickable area from <a> tag is bigger than I want, I just want in the text, but the box are in div.

I'll show my code: 

<div class="mt-5">
  <a :href="route('login')" class="flex justify-center">
    <img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
    <p class="text-purple-600">Back to login</p>
  </a>
</div>


Here's how it's going:
Developer Tools outline

tailwind-css css
1 Answers

You can shrink the anchor's flex box to contain just the content by using inline-flex and then center the content inside the surrounding div. For example:

<div class="mt-5 text-center">
  <a :href="route('login')" class="inline-flex align-center">
    <img src="../../Assets/Img/menorq.svg" class="w-4 h-4 mt-1" alt="">
    <p class="text-purple-600">Back to login</p>
  </a>
</div>
user_2874760
Related