我正在使用tailwind和Vue來制作一些可重用的toggle組件。組件的邊框是灰色的，但計劃是當我點擊組件，邊框將是紅色的，就像下面的圖像(我正在使用/嘗試使用焦點)。

問題是因為我可以只在輸入和按鈕上使用焦點，但是我需要在div標簽上使用焦點

我有一個div，里面有兩個段落和一個輸入(類型:復選框)。我試著用tabindex，但它不起作用，當我點擊復選框或輸入字段(灰色按鈕)時，它不聚焦。僅當我在組件內部單擊而不是在復選框字段中單擊時才獲得焦點。

代碼是

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

有人有建議，或者不同的方法去做嗎？

# # #我不太明白你的問題，但你可以從tailwind文檔中查看:

focus-within (:focus-within):使用focus-within修飾符，當元素或其后代之一具有焦點時，設置元素的樣式:

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

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

# # #我認為你應該找到觸發變化的確切狀態，然后使用tailwind相應地改變它。不管是:聚焦、聚焦-可見還是:聚焦-內在，你都應該清楚。你可以使用瀏覽器開發工具來檢查它。然后對這些狀態應用您的更改。 關于如何根據狀態進行更改，您可以關注官方順風文檔:https://tailwindcss . com/docs/hover-focus-and-other-States # focus