문제 상황

CSS에서 nth-child(odd), nth-child(even)로 사용했던 홀수번, 짝수번 요소의 스타일 설정을 Tailwind에서는 어떻게 할까?

적용

<section className="px-3 flex flex-col">
  {artistArr.map((item, index) => (
    <div className="lg:odd:items-end lg:even:items-start">
	// ... //
	</div>
  ))}
</section>

순서에 따라 다른 스타일을 적용하고자 하는 그 태그에 odd와 even을 사용하면 된다.
일반 CSS와 다를게 하나도 없는 내용이다..!

부모 태그에 작성하는게 아니었다.

순서에 따라 스타일을 적용하기 때문에, 부모 요소에 odd, even을 사용하는거 아닌가 하는 분들이 계실거라고 생각한다.
물론 Tailwind를 사용하신다면 기본 CSS 지식을 다 갖추고 계시겠지만, 필자는 헷갈렸다..
odd, even은 형제 요소 사이에서의 순서를 기준으로 하기때문에, 부모 요소가 아닌 반복되는 녀석들에게 정의해줘야하는 속성이다.
혹시나 필자처럼 section 태그에 odd, even 설정해놓고 왜 적용이 안되는건지 고민하는 일을 없길바랍니다 ㅠㅠ

참고 자료

참고 자료 1
참고 자료 2
참고 자료 3
MDN 공식 docs
Tailwind 공식 docs