☄️ 문제 상황 input 필드에 포커스 시, 밑줄이 왼쪽에서 오른쪽으로 채워지면서 보라색으로 변하는 애니메이션을 구현하고 싶었다.그러나, 포커스를 주었음에도 밑줄의 색상과 스타일이 변하지 않는 문제가 발생했다. ☄️ 문제 원인 Tailwind CSS는 특정 요소에 포커스가 갔을 때, 인접한 다른 요소의 스타일을 변경하는 기능은 기본적으로 제공하지 않는다.문제는 input 요소에 포커스가 갈 때, 밑줄로 사용할 인접한 span 요소의 스타일이 변경되지 않는다는 점이었다. ☄️ 해결 방법 Tailwind CSS의 peer 클래스를 사용했다.peer 클래스란?특정 요소에 상태 변화가 발생했을 때, 형제 요소의 스타일을 동적으로 변경할 수 있게 해주는 Tailwind CSS의 유틸리티 클래스 1. pee..
