I have a rounded div containing a button (i wanted to create a rounded "add button") and i'd like to apply a different border color to this div when it is focused, but i can't get the hoped result using the :focus modifier. This is what i tried
<div:class="
['flex
rounded-full
border border-blue-100
h-12 w-12
justify-center
absolute
bottom-10
right-5
focus:border-red-500'
]">
<button type="button" class="text-5xl">+</button>
</div>"
However the border does not change color
The DIV is not focusable - you should apply the classes on the BUTTON itself:
<button class="text-5xl flex rounded-full border border-blue-100 h-12 w-12 justify-center items-center focus:border-red-500">+</button>
the div is not focusable so you have to apply the border to button or there is another way that
you do focus-within instead of focus on div