How can i apply a border to a div element when it is focused, using tailwind?

user_18973819 0
Viewed 125

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

vuejs3 tailwind-css javascript
2 Answers

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>
user_59628020

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

user_188750830
Related