CODEWITHSUNDEEP
cssvue.jstailwind-css
Dario Marjanovic
Dario Marjanovic

Reputation: 65

How to focus a div tag with a tailwind?

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

enter image description here

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>

Does anyone have any advice, or maybe different ways on how to do it ?

Upvotes: 2

Views: 14507

Answers (2)

Rashidul Hasan Rashid
Rashidul Hasan Rashid

Reputation: 3

I think you should find the exact state triggering the change, then change it accordingly using tailwind. Whether it is :focus, :focus-visible or :focus-within you should become clear of it. You can use the browsers dev-tools to check it out. Then apply your changes for those states. For how to change based on the states you can follow official tailwind docs as mentioned in this answer:
tailwind focus docs

Upvotes: 0

Mich&#233;e Allidjinou
Mich&#233;e Allidjinou

Reputation: 228

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

Upvotes: 15

Related Questions