OTTER-LOG

수정시점에 확인해본 결과 tailwind 에도 keep-all 을 사용할 수 있습니다. break-keep 이라는 속성을 넣으시면 손쉽게 사용할 수 있습니다.

(https://tailwindcss.com/docs/word-break)

프론트엔드 개발을 할 때에 문자를 다루는 일은 아주 많다. 따라서 문자에 설정되는 css 설정도 아주 많다. 그중에 내가 제일 좋아하는 설정은 word-break : keep-all 설정이었다. 이, 속성을 사용하면 한글을 인식해 줄바꿈을 적절하게 해주기 때문이다. 위와같은 악랄한 제목을 보자. 아주 거슬린다.

tailwind에 keep-all이 없다.

tailwind를 스타일링 스택으로 사용해 프로젝트를 진행하고 있었던 나는, keep-all을 찾아서 공식문서를 뒤지기 시작했다. 그런데, keep-all 속성만 없었다. 설마 없겠어..? 속으로 생각하며 일단 존재하는 속성만으로 어떻게 해보려고 했는데 되는 설정은 없었다.

깃허브에 이슈에 검색해 보았다. 그러니 다음과 같았다.

https://github.com/tailwindlabs/tailwindcss/discussions/6273

Tailwind base, layer 이용하기

그런데, tailwind 에서자는 자체적으로 커스텀스타일을 따로 적용할 수 있도록 지원하고 있다.

// main.css

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  /* ... */
}

이런 방식으로, 특정 HTML 태그에 스타일을 입힐 수 있다.

( Ref Adding base styles )

이를 통해 다음과 같이 적용했다.

// main.css

@layer base {
  h1,
  h2, {
		word-break: keep-all;
  }
  /* ... */
}