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