Part 42: Styling Based on Sibling State: peer & peer-checked

When you need to style an element based on the state of a sibling element (like an input or checkbox), use the peer class.

1. Pure CSS Floating Label Input

<div class="relative">
  <input 
    type="text" 
    id="username" 
    placeholder=" " 
    class="peer block w-full px-3 pt-6 pb-2 border rounded-lg focus:border-blue-600 focus:outline-none"
  />
  <label 
    for="username" 
    class="absolute left-3 top-4 text-slate-400 text-sm transition-all duration-200 
           peer-focus:-translate-y-2.5 peer-focus:text-xs peer-focus:text-blue-600 
           peer-[:not(:placeholder-shown)]:-translate-y-2.5 peer-[:not(:placeholder-shown)]:text-xs"
  >
    Username
  </label>
</div>

2. Custom Styled Checkbox using peer-checked

<label class="flex items-center gap-3 cursor-pointer">
  <input type="checkbox" class="peer sr-only" />
  <div class="size-5 border-2 border-slate-300 rounded peer-checked:bg-blue-600 peer-checked:border-blue-600 transition flex items-center justify-center text-white">
    ✓
  </div>
  <span class="text-slate-700">Remember me</span>
</label>

Key Takeaways

• Place peer on the controlling input.
• Use peer-checked:* or peer-focus:* on subsequent siblings to create pure CSS interactive widgets without JavaScript!

In Part 43, we will explore Dark Mode in Tailwind: Media Query vs Class Strategy!