I’m using tailwind and Vue to make some reusable toggle component. Border of component is gray color, but plan is when I click on component, border will be red like on a image below (I’m using/trying using focus).

Problem is because I can use focus just on input and button, but I need focus on div tag

I have one div, inside is two paragraph and one input (type:checkbox). I tried with tabindex and it doesn’t work, when I click in checkbox or input field (gray button) it doesn’t focus. Only focuses when I click inside a component but not in checkbox field.

Code is

<template>
    <div>
        <div tabindex="1"
            class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white  transition duration-150
            ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent
            focus:outline-none focus:ring disabled:opacity-50 motion-reduce:transition-none
            dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800" :class="[ error
            ? 'border-red-500  caret-red-500 focus:ring-red-500/50'
            : 'border-zinc-300 caret-primary focus:ring-primary/50 dark:border-zinc-600  dark:focus:border-transparent',
           ]"
        >
           <div class="flex justify-between">
               <div>
                   <h1 class="text-md font-semibold text-black">
                       {{ titleToggle }}
                   </h1>
                   <p class="inline text-md text-gray-500">
                       {{ subtitleToggle }}
                   </p>
               </div>
               <label class="switch my-auto">
                   <input
                       :value="toggleSwitch"
                       v-bind="$attrs" type="checkbox"
                       class="rounded-lg " :class="[
                       error
                          ? 'border-red-500  caret-red-500 focus:ring-red-500/50'
                          : 'border-zinc-300 caret-primary focus:ring-primary/50 
                          dark:border-zinc-600  dark:focus:border-transparent',]" @click="updateInput"
                    >
                    <span :class="[toggleSwitch ? 'bg-red-500 border-red-500' : 'bg-gray-300 border-gray-300',
                         ]" class="slider round absolute cursor-pointer inset-0  border  rounded-full"
                    />
                </label>
            </div>
        </div> 
    </div>
</template>

Is anyone have advice, or maybe different way how to do it ?

>Solution :

I don’t really understand your question, but you may have a look at this from the tailwind documentation :

focus-within (:focus-within) : Style an element when it or one of its descendants has focus using the focus-within modifier:

<div class="focus-within:shadow-lg ...">
  <input type="text" />
</div>

https://tailwindcss.com/docs/hover-focus-and-other-states#focus