stroke-width

stroke-width 유틸리티는 SVG의 선(stroke) 굵기를 결정해 줘요. 아이콘 세트를 스타일링할 때 유용하답니다.

출처: 문서

본문

클래스	CSS
`stroke-<number>`	`stroke-width: <number>;`
`stroke-(length:<custom-property>)`	`stroke-width: var(<custom-property>);`
`stroke-[<value>]`	`stroke-width: <value>;`

기본 예시 (Basic example)

stroke-<number> 형태의 유틸리티(예: stroke-1, stroke-2)를 사용하면 SVG의 선 굵기를 설정할 수 있어요:

<svg class="stroke-1 ..."></svg>
<svg class="stroke-2 ..."></svg>

이것은 Heroicons 같은 아이콘 세트를 스타일링할 때 유용해요.

커스텀 값 사용하기 (Using a custom value)

stroke-[<value>] 문법을 사용하면 완전히 커스텀한 값으로 선 굵기를 설정할 수 있어요:

<div class="stroke-[1.5] ...">
  <!-- ... -->
</div>

CSS 변수의 경우 stroke-(length:<custom-property>) 문법을 사용할 수도 있어요:

<div class="stroke-(length:--my-stroke-width) ...">
  <!-- ... -->
</div>

이것은 stroke-[length:var(<custom-property>)]의 줄임말로, var() 함수를 자동으로 추가해 주는 문법이에요.

반응형 디자인 (Responsive design)

stroke-width 유틸리티에 md: 같은 브레이크포인트 변형을 붙이면 중간 크기(md) 화면 이상에서만 그 유틸리티가 적용돼요:

<div class="stroke-1 md:stroke-2 ...">
  <!-- ... -->
</div>

변형(variant) 사용법에 대해 더 알고 싶다면 variants 문서를 살펴보세요.