[Tailwind CSS] 별점 평가

Tailwind CSS를 이용해서 별점 평가하는 코드를 짰다. React나 Next.js를 이용한다면 for를 htmlFor로, class를 className으로 변경하자.

peer는 바로 뒤 형제 요소에 CSS를 입힐 때 사용한다. 셀렉터에서 ~의 역할이다. 다른 별점 선택 시 체크가 풀리도록 상위 label을 설정했다.

이유는 모르겠지만, peer가 맨 뒤 요소부터 적용되어서 reverse를 통해 순서를 뒤바꿨다. 때문에 문서 내 값은 내림차순이다. 하지만 클라이언트 화면에서는 정상적인 오름차순이다.

참고
TailwindCSS Docs - peer-{modifier}