Border Width

​Basic usage

​모든 면

border, border-0, border-2, border-4, 또는 border-8 유틸리티를 사용해 엘리먼트의 모든 면에 테두리 두께를 설정할 수 있습니다.

<div class="border border-indigo-600 ..."></div>
<div class="border-2 border-indigo-600 ..."></div>
<div class="border-4 border-indigo-600 ..."></div>
<div class="border-8 border-indigo-600 ..."></div><div class="border border-sky-500"></div>
<div class="border-2 border-sky-500"></div>
<div class="border-4 border-sky-500"></div>
<div class="border-8 border-sky-500"></div>

​각 면별 설정

border-*, border-*-0, border-*-2, border-*-4, 또는 border-*-8 유틸리티를 사용해 엘리먼트의 한 면에 테두리 두께를 설정할 수 있습니다.

<div class="border-t-4 border-indigo-500 ..."></div>
<div class="border-r-4 border-indigo-500 ..."></div>
<div class="border-b-4 border-indigo-500 ..."></div>
<div class="border-l-4 border-indigo-500 ..."></div>

​가로 및 세로 방향 테두리

border-x-*와 border-y-* 유틸리티를 사용해 엘리먼트의 두 방향 테두리 너비를 동시에 설정할 수 있습니다.

<div class="border-x-4 border-indigo-500 ..."></div>
<div class="border-y-4 border-indigo-500 ..."></div>

​엘리먼트 사이에 경계선 추가하기

divide-x-*와 divide-y-* 너비 유틸리티를 divide-* 색상 유틸리티와 함께 사용하여 자식 엘리먼트 사이에 경계선을 추가할 수 있습니다.

<div class="divide-y divide-slate-200 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div><div class="divide-y divide-slate-700 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

더 자세한 내용은 Divide Width와 Divide Color 문서에서 확인할 수 있습니다.

​논리적 속성 사용하기

border-s-*와 border-e-* 유틸리티를 사용하여 border-inline-start-width와 border-inline-end-width 논리적 속성을 설정할 수 있습니다. 이 속성들은 텍스트 방향에 따라 왼쪽 또는 오른쪽 테두리에 매핑됩니다.

<div dir="ltr">
  <div class="border-s-4 ..."></div>
<div>

<div dir="rtl">
  <div class="border-s-4 ..."></div>
<div>

더 세밀한 제어를 위해 LTR 및 RTL 수정자를 사용하여 현재 텍스트 방향에 따라 특정 스타일을 조건부로 적용할 수도 있습니다.

​Preflight 없이 사용하기

프로젝트에서 Preflight를 비활성화한 경우, border-width 유틸리티를 사용할 때마다 border style 유틸리티를 포함해야 실제로 테두리가 적용됩니다:

<div class="border-4 border-indigo-500 ...">
<div class="border-4 border-solid border-indigo-500 ...">
  <!-- ... -->
</div>

이는 브라우저가 대부분의 엘리먼트의 border-style을 기본적으로 none으로 설정하기 때문입니다. 따라서 border-width만 추가하는 것만으로는 테두리가 렌더링되지 않습니다.

Preflight는 border-style을 solid로, border-width를 0으로 설정하는 전역 테두리 리셋을 적용합니다. 이로 인해 Preflight를 사용하는 프로젝트에서는 border-width 유틸리티만으로도 엘리먼트에 테두리를 추가할 수 있습니다.

​Applying conditionally

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

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

<div class="border-2 hover:border-t-4">
  <!-- ... -->
</div>

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

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

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

<div class="border-2 md:border-t-4">
  <!-- ... -->
</div>

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

​Using custom values

​테마 커스터마이징

기본적으로 Tailwind는 다섯 가지 border-width 유틸리티를 제공하며, 각 방향(수평, 수직, 상단, 우측, 하단, 좌측)에 동일한 수의 유틸리티를 제공합니다. 여러분은 Tailwind 설정 파일의 theme.borderWidth 섹션을 수정하여 이를 변경하거나 추가, 제거할 수 있습니다.

module.exports = {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      '0': '0',
      '2': '2px',
      '3': '3px',
      '4': '4px',
      '6': '6px',
      '8': '8px',
    }
  }
}

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

​임의 값

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

<div class="border-t-[3px]">
  <!-- ... -->
</div>

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