CODEWITHSUNDEEP
next.jstailwind-css
Usama Abdul Razzaq
Usama Abdul Razzaq

Reputation: 803

how to make focus state working on div in tailwind-CSS

I make a container and I want to change its background color after the user clicks that container but the problem is, it is a div, and the focus state is not working on the div but the active state is working,

this is the code link

<div className="flex space-x-3 items-center hover:bg-messenger-gray-100 focus:bg blue-50 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
      {/* the code above on the top level div is not working*/}
      {/* Focus is not working on this div */}
      {/* active state works */}

        <span className=" font-normal whitespace-nowrap ">Muhammad Hamza</span>
</div>
  1. how can I make the div focusable?
  2. Is this focus property also don't work on <span></span>?

Upvotes: 0

Views: 1093

Answers (1)

MagnusEffect
MagnusEffect

Reputation: 3905

You can not apply focus for div or span. However to achieve you can try one of the hack I use. You can define the thing in button.

Below is the code:

<script src="https://cdn.tailwindcss.com"></script>


<div class="p-10">
<div class="flex space-x-3 items-center hover:bg-messenger-gray-100 relative p-2 rounded-lg group cursor-pointer border active:bg-blue-50">
        <span class=" font-normal whitespace-nowrap">Muhammad Hamza</span>
</div>

<button class=" w-full flex my-4  items-start hover:bg-gray-100   p-2 rounded-lg group cursor-pointer border active:bg-blue-50 focus:bg-pink-300 focus:border-pink-500"> Muhammad Hamza with focus </button>

</div>

Upvotes: 1

Related Questions