TailwindCSS #7 | details, selection

details

개요

• HTML 태그, TailwindCSS 보단 기본 HTML 내용
• 일반적으로 <summary> 와 박스 태그 <div>, <span> 들 중 하나; 즉, 두 개의 자식 태그를 가지고 활용합니다.
• 기본형은 노션의 토글 버튼 같은 UI 를 제공합니다.

기본형 예시

코드

<details>
  <summary>토글 버튼</summary>
  <span>까꿍</span>
</details>

화면

open 상태 특성 사용 예시

코드

<details className="select-none open:text-white open:bg-indigo-400">
  <summary className="cursor-pointer">토글 버튼</summary>
  <span>까꿍</span>
</details>

화면

selection

개요

• 컨텐츠가 드래그 등으로 선택되었을때 여러 특성을 줄 수 있는 Selector (배경색, 글자색 등)

예시

코드

<span className="selection:bg-red-600 selection:text-yellow-400">
  까꿍
</span>

화면