TailwindCSS #5 | 배열 Modifier, Empty

배열 Modifier

개요

• 배열의 형태로 있는 요소들의 CSS 적용에 도움을 주는 Modifier 입니다.

배열 Modifier 목록

Modifier	CSS
only-of-type:	&:only-of-type
first-of-type:	&:first-of-type
last-of-type:	&:last-of-type
odd:	&:nth-child(odd)
even:	&:nth-child(even)

---

Empty

개요

• CSS Selector, TailwindCSS 를 통해 보다 간편하게 사용할 수 있습니다.

예시

<ul>
  {["a", "b", "c", ""].map((c, i) => (
    <li className="bg-red-500 py-2 empty:hidden" key={i}>
      {c}
    </li>
  ))}
</ul>