Display

​Basic usage

​Block & Inline

텍스트와 엘리먼트의 흐름을 제어하기 위해 inline, inline-block, block 유틸리티를 사용하세요.

<div>
  텍스트의 흐름을 제어할 때, CSS 속성
  <span class="inline">display: inline</span>
  을 사용하면 엘리먼트 내부의 텍스트가 일반적으로 줄바꿈됩니다.

  반면에 속성 <span class="inline-block">display: inline-block</span>
  을 사용하면 엘리먼트가 감싸져 내부 텍스트가 부모를 벗어나지 않도록 합니다.

  마지막으로, 속성 <span class="block">display: block</span>
  을 사용하면 엘리먼트가 자신만의 줄에 배치되고 부모를 채웁니다.
</div>

​Flow Root

flow-root 유틸리티를 사용하여 자체 블록 서식 컨텍스트를 가진 블록 레벨 엘리먼트를 생성할 수 있습니다.

<div class="p-4">
  <div class="flow-root ...">
    <div class="my-4 ...">자, 내가 뭔가 말해줄게, ...</div>
  </div>
  <div class="flow-root ...">
    <div class="my-4 ...">물론, 원한다면 웃어도 돼...</div>
  </div>
</div>

​Flex

flex 유틸리티를 사용하여 블록 레벨의 플렉스 컨테이너를 생성할 수 있습니다.

Andrew Alfred Technical advisor

<div class="flex items-center">
  <img src="path/to/image.jpg">
  <div>
    <strong>Andrew Alfred</strong>
    <span>Technical advisor</span>
  </div>
</div>

​Inline Flex

inline-flex 유틸리티를 사용하여 텍스트와 함께 흐르는 인라인 플렉스 컨테이너를 만들 수 있습니다.

<p>
  오늘은 하루 종일 ... 방법을 연구했습니다.
  <span class="inline-flex items-baseline">
    <img src="path/to/image.jpg" alt="" class="self-center w-5 h-5 rounded-full mx-1" />
    <span>Kramer</span>
  </span>
  는 가능한 모든 방법을 계산해봤지만 작동할 방법이 없다고 계속 말하지만, ...
</p>

​Grid

grid 유틸리티를 사용하여 그리드 컨테이너를 생성합니다.

<div class="grid gap-4 grid-cols-3 grid-rows-3">
  <!-- ... -->
</div>

​인라인 그리드

inline-grid 유틸리티를 사용하여 인라인 그리드 컨테이너를 생성할 수 있습니다.

<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>
<span class="inline-grid grid-cols-3 gap-4">
  <span>01</span>
  <span>02</span>
  <span>03</span>
  <span>04</span>
  <span>05</span>
  <span>06</span>
</span>

​Contents

contents 유틸리티를 사용하면 자식 엘리먼트가 부모의 직접적인 자식처럼 동작하는 “팬텀” 컨테이너를 만들 수 있습니다.

<div class="flex ...">
  <div class="flex-1 ...">01</div>
  <div class="contents">
    <div class="flex-1 ...">02</div>
    <div class="flex-1 ...">03</div>
  </div>
  <div class="flex-1 ...">04</div>
</div>

​Table

table, table-row, table-cell, table-caption, table-column, table-column-group, table-header-group, table-row-group, table-footer-group 유틸리티를 사용하여 각각의 테이블 엘리먼트처럼 동작하는 엘리먼트를 생성할 수 있습니다.

<div class="table w-full ...">
  <div class="table-header-group ...">
    <div class="table-row">
      <div class="table-cell text-left ...">Song</div>
      <div class="table-cell text-left ...">Artist</div>
      <div class="table-cell text-left ...">Year</div>
    </div>
  </div>
  <div class="table-row-group">
    <div class="table-row">
      <div class="table-cell ...">The Sliding Mr. Bones (Next Stop, Pottersville)</div>
      <div class="table-cell ...">Malcolm Lockyer</div>
      <div class="table-cell ...">1961</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Witchy Woman</div>
      <div class="table-cell ...">The Eagles</div>
      <div class="table-cell ...">1972</div>
    </div>
    <div class="table-row">
      <div class="table-cell ...">Shining Star</div>
      <div class="table-cell ...">Earth, Wind, and Fire</div>
      <div class="table-cell ...">1975</div>
    </div>
  </div>
</div>

​Hidden

hidden 유틸리티를 사용하면 엘리먼트를 display: none으로 설정하여 페이지 레이아웃에서 제거할 수 있습니다 (visibility 문서의 invisible과 비교해 보세요).

<div class="flex ...">
  <div class="hidden ...">01</div>
  <div>02</div>
  <div>03</div>
</div>

​Applying conditionally

​호버, 포커스 및 기타 상태

Tailwind는 상태에 따라 유틸리티 클래스를 조건부로 적용할 수 있게 해줍니다. 예를 들어, hover:inline-flex 를 사용하면 inline-flex 유틸리티를 hover 상태에서만 적용할 수 있습니다.

<div class="flex hover:inline-flex">
  <!-- ... -->
</div>

사용 가능한 모든 상태 수정자 목록은 호버, 포커스, & 기타 상태 문서를 참고하세요.

​브레이크포인트와 미디어 쿼리

여러분은 반응형 브레이크포인트, 다크 모드, prefers-reduced-motion 등과 같은 미디어 쿼리를 타겟팅하기 위해 변형 수식어를 사용할 수 있습니다. 예를 들어, md:inline-flex를 사용하면 중간 화면 크기 이상에서만 inline-flex 유틸리티를 적용할 수 있습니다.

<div class="flex md:inline-flex">
  <!-- ... -->
</div>

더 자세히 알아보려면 반응형 디자인, 다크 모드, 그리고 다른 미디어 쿼리 수식어에 대한 문서를 확인하세요.