How To Use The Peer Class In Tailwind

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-row-reverse and flex-col-reverse classes. This is shown in the example below.

Real world example

I recently got the task to style an input field and an icon based on the state of the input field. I could have used JavaScript to solve this, but I wanted to try out the peer class.

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 peer and placeholder-shown in action:

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

The peer class is added to the input field and the peer-focus and 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>

CodePen solution

To read more about how to style siblings in Tailwind head over to the official documentation.