TailwindCSS Tip : Use of focus-within and focus-visible

Use the `focus-within` and `focus-visible` pseudo-classes to style elements based on their focus state or when focused by keyboard users.

Last edited :

Focus within

The focus-within pseudo-class allows you to style a parent element when any of its child elements are focused. This is particularly useful for creating interactive forms or components that require a focus effect on the parent element when the child element is focused.

<div class="grid [grid-template-columns:1fr_auto] items-center rounded-full w-full max-w-sm pr-1 text-sm border border-gray-200 shadow-sm shadow-gray-950/5 has-[input:focus]:ring-2 has-[input:focus]:ring-primary-600 has-[input:focus]:border-transparent dark:bg-gray-800/25 dark:border-gray-800">
    <input 
        type="email" 
        class="h-10 pl-4 text-sm bg-transparent outline-hidden peer" 
        placeholder="Enter your email" 
        required
    />
    <button class="h-8 px-3.5 rounded-full flex items-center justify-center bg-indigo-600 text-white hover:brightness-90 transition-[filter] duration-300">Subscribe</button>
</div>

Focus visible

The focus-visible pseudo-class targets elements that receive focus, but only when triggered via keyboard or other non-mouse inputs. This ensures focus rings are displayed for accessibility purposes, without disrupting the design for mouse users.

<button class="h-8 px-3.5 rounded-full flex items-center text-sm justify-center border outline-2 outline-offset-2 outline-indigo-600 bg-indigo-600 border-indigo-700 text-white hover:brightness-90 focus-visible:outline transition-[filter] duration-300 dark:border-white/15">Subscribe</button>

User information form (focus-within)

Use focus-within to add focus effects to container elements when their child inputs are focused. This is useful for emphasizing active sections in forms.

Your name
Contact Information
<form class="group space-y-6">
    <fieldset class="space-y-4 transition-opacity duration-200 group-focus-within:opacity-50 focus-within:opacity-100!">
        <legend class="text-gray-950 text-sm dark:text-white">Your name</legend>
        
        <div class="grid grid-cols-2 gap-2">
            <input class="block w-full px-3 h-9 text-sm rounded-lg border shadow-sm shadow-gray-950/5 outline-2 outline-indigo-600 focus:outline dark:bg-gray-800/25 dark:border-gray-800" placeholder="Firstname"/>
            <input class="block w-full px-3 h-9 text-sm rounded-lg border shadow-sm shadow-gray-950/5 outline-2 outline-indigo-600 focus:outline dark:bg-gray-800/25 dark:border-gray-800" placeholder="Lastname"/>
        </div>
    </fieldset>

    <fieldset class="space-y-4 transition-opacity duration-200 group-focus-within:opacity-50 focus-within:opacity-100!">
        <legend class="text-gray-950 text-sm dark:text-white">Contact Information</legend>

        <div class="grid grid-cols-2 gap-2">
            <input type="email" class="block w-full px-3 h-9 text-sm rounded-lg border shadow-sm shadow-gray-950/5 outline-2 outline-indigo-600 focus:outline dark:bg-gray-800/25 dark:border-gray-800" placeholder="Email"/>
            <input type="text" class="block w-full px-3 h-9 text-sm rounded-lg border shadow-sm shadow-gray-950/5 outline-2 outline-indigo-600 focus:outline dark:bg-gray-800/25 dark:border-gray-800" placeholder="Phone number"/>
        </div>
    </fieldset>
</form>

Become 70x More Confident with TailwindCSS

Elevate your TailwindCSS skills with over 70 expert-crafted tips. Get access to 50 actionable tips today and start building faster, smarter, and more confidently.