tailwind peer

tailwind의 peer에 대해서 간단하게 정리해두려고 한다.

css에 sibling이라는 속성이 있는데 비슷한 느낌이다.
sibling은 형제자매라는 의미인데, peer는 또래라는 의미다.

peer modifier는 sibling element의 state에 따라서 스타일을 다르게 설정하고 싶을때 사용한다.

<div className="flex flex-col gap-4">
  <input
    className="peer w-full rounded-lg bg-gray-100"
    placeholder="Enter your email"
    type="email"
  />
  <button className="w-full rounded-lg bg-green-400 peer-focus:bg-pink-300 ">
    Submit
  </button>
</div>

위 코드와 같이 <input>엘리먼트의 class에 peer를 추가해준다.

그 다음 형제 엘리먼트인 <button>의 class에 peer-focus:bg-pink-300을 추가해줬다.

이게 무슨 의미냐하면, peer를 추가한 input엘리먼트가 focus되면, button의 백그라운드 컬러를 변경하겠다라는 의미이다!

사실 이런 부분도 JS의 도움을 받아서 state를 가지고 구현을 해야할것 같은데, tailwind를 사용하면 이런 로직적인 부분도 손쉽게 구현할 수 있는게 장점인것 같다!

참고

• https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state