text-decoration-style

text-decoration-style 유틸리티는 텍스트 꾸밈선(밑줄 등)의 스타일이 실선인지, 이중선인지, 점선인지 등을 결정해 줘요.

출처: 문서

본문

클래스 스타일 (ClassStyles)

클래스	CSS
`decoration-solid`	`text-decoration-style: solid;`
`decoration-double`	`text-decoration-style: double;`
`decoration-dotted`	`text-decoration-style: dotted;`
`decoration-dashed`	`text-decoration-style: dashed;`
`decoration-wavy`	`text-decoration-style: wavy;`

예시 (Examples)

기본 예시 (Basic example)

decoration-dotted나 decoration-dashed 같은 유틸리티를 사용하면 요소의 텍스트 꾸밈선 스타일을 바꿀 수 있어요:

<p class="underline decoration-solid">The quick brown fox...</p>

<p class="underline decoration-double">The quick brown fox...</p>

<p class="underline decoration-dotted">The quick brown fox...</p>

<p class="underline decoration-dashed">The quick brown fox...</p>

<p class="underline decoration-wavy">The quick brown fox...</p>

반응형 디자인 (Responsive design)

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

<p class="underline md:decoration-dashed ...">
  Lorem ipsum dolor sit amet...
</p>

더 알아보기 (Learn more)

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