How To Use The Peer Class In TailwindRasmus Langvad / October 13, 2023
What is the peer class?
The peer class in Tailwind is a way to style an element based on the state of a sibling element.
It uses the Subsequent-sibling combinator to style the element.
How to use the peer class
The peer class is used by adding the
peer class to the element you want to depend on and then adding the
peer-* class to the element you want to style based on the sibling.
One important thing to notice is that the
peer class must be added before the
peer-* class. Which means that a sibling that needs to be styled based on the state of another sibling must be placed after the sibling it depends on.
If the you need to style a sibling placed before the peer you can rearrange the elements using
flexbox and the
flex-col-reverse classes. This is shown in the example below.
Real world example
The requirements for the component was:
- The icon and placeholder text should be grayed out by default
- When the input field is focused the text should be black and the icon purple
- When the input field loses focus the text and icon should go back to default
- If the input field loses focus after something has been typed the black text and purple icon should remain
To solve this I explored two new concepts; the
peer class and the
placeholder-shown pseudo class. The
placeholder-shown pseudo class, as the name hints of, is used to style the input field based on whether the placeholder text is shown or not.
Here is an example showing both
placeholder-shown in action:
<input class="peer text-black placeholder-shown:text-gray-500 focus:placeholder:text-black" /> <svg class="text-purple-500 peer-focus:text-purple-500 peer-placeholder-shown:text-gray-500">...</svg>
peer class is added to the input field and the
peer-placeholder-shown classes are added to the icon.
By doing this we can style the icon based on the state of the input field.
Here is the full solution in code together with a working CodePen if you want to explore further.
<div class="border-gray-300 shadow text-gray-100 mx-auto flex w-56 flex-row-reverse items-center rounded-3xl border bg-neutral-50"> <input class="placeholder-shown:text-gray-500 text-black focus:placeholder:text-black peer h-12 rounded-3xl border-0 bg-neutral-50 focus:outline-0" placeholder="Search" /> <svg class="text-purple-500 peer-focus:text-purple-500 peer-placeholder-shown:text-gray-500 mr-2 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /> </svg> </div>
To read more about how to style siblings in Tailwind head over to the official documentation.