Text Indent

​Basic usage

​텍스트 들여쓰기 추가하기

indent-* 유틸리티를 사용하여 블록 내 텍스트 앞에 표시되는 빈 공간(들여쓰기)의 양을 설정할 수 있습니다.

<p class="indent-8">
  그래서 나는 물속으로 걸어 들어가기 시작했다. 여러분에게 거짓말하지 않겠다, 나는 무서웠다. 하지만 나는 계속 나아갔고, 파도를 지나면서 이상한 평온함이 나를 감쌌다. 그것이 신의 개입이었는지, 아니면 모든 생명체의 유대감이었는지 모르겠지만, 제리에게 말하건대 그 순간 나는 <em>해양 생물학자</em>였다.
</p>

​음수 값 사용하기

텍스트 들여쓰기에 음수 값을 사용하려면 클래스 이름 앞에 대시(-)를 붙여 음수 값으로 변환합니다.

<div class="-indent-8">
  그래서 나는 물속으로 걸어 들어가기 시작했다. 거짓말은 하지 않겠다...
</div>

​Applying conditionally

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

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

<div class="indent-4 hover:indent-8">
  <!-- ... -->
</div>

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

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

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

<div class="indent-4 md:indent-8">
  <!-- ... -->
</div>

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

​Using custom values

​테마 커스터마이징

기본 텍스트 들여쓰기 스케일은 기본 간격 스케일을 기반으로 합니다. tailwind.config.js 파일에서 theme.spacing 또는 theme.extend.spacing을 수정하여 간격 스케일을 커스터마이징할 수 있습니다.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
      }
    }
  }
}

또는 tailwind.config.js 파일에서 theme.textIndent 또는 theme.extend.textIndent를 수정하여 텍스트 들여쓰기 스케일만 커스터마이징할 수도 있습니다.

module.exports = {
  theme: {
    extend: {
      textIndent: {
        '128': '32rem',
      }
    }
  }
}

기본 테마 커스터마이징에 대해 더 알아보려면 테마 커스터마이징 문서를 참고하세요.

​임의 값

테마에 포함시키기 어려운 text-indent 값을 일회성으로 사용해야 한다면, 대괄호를 사용해 임의의 값으로 속성을 즉석에서 생성할 수 있습니다.

<div class="indent-[50%]">
  <!-- ... -->
</div>

임의 값 지원에 대해 더 알아보려면 임의 값 문서를 참고하세요.