24.10.15 tailwind에서 제공하지 않는 style속성 사용하기

팀프로젝트에서 전체 페이지에 적용되는 사이드바에 이런식으로 텍스트를 새로로 작성하고 싶었다.

모르니까 바로 검색을 해보았다.

모두들 writing-mode: vertical-lr 을 사용하면 텍스트를 글자의 왼쪽에서 오른쪽 순서로 방향은 위에서 아래로 세로로 표현해준다는 것이다.

 

그런데 우리의 엄청난 tailwind는 해당 속성을 지원해주지 않고있다.

그래서 텍스트 태그의 width를 폰트크기보다 아주 조금 크게하고, width를 넘어가는 텍스트를 아래로 보낼까 했지만

이게 맞나? 싶었다.

그래서 tailwind에서 제공해주지 않는 속성을 사용할 방법을 찾아보았다.

뭐 어쩌구 저쩌구 뭐라뭐라 썼는데 결국 tailwind.config.js파일의 theme안에 추가를 하면 되는 것이다.

  theme: {
    extend: {
      writingMode: {
        'vertical-lr': 'vertical-lr',
        'vertical-rl': 'vertical-rl',
        'horizontal-tb': 'horizontal-tb'
      },
      colors: {

그래서 바로 해당 속성을 추가해봤다. 근데 적용이 안됐다.

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  .writingMode-vertical-lr {
    writing-mode: vertical-lr;
  }
  .writingMode-vertical-rl {
    writing-mode: vertical-rl;
  }
  .writingMode-horizontal-tb {
    writing-mode: horizontal-tb;
  }
}

문제는 저 layer의 utilities를 추가하지 않는 것이었다.

tailwind가 어떻게 동작하는지 생각해본적이 없었는데, tailwind의 세팅코드들이 아마 tailwind에서 제공해주는 모든 속성을 저런식으로 만들어놓고 적용시켜준 것 같다.

<Link className="writingMode-vertical-lr text-white" href={'/'}>
  홈
</Link>
<Link className="writingMode-vertical-lr text-white" href={'/tech_interview'}>
  기술면접
</Link>
<Link className="writingMode-vertical-lr text-white" href={'/resume'}>
  이력서
</Link>

만들어둔 class를 저렇게 className에 넣으면 당연하게도 적용이 되는 것이다.

이런 의미에서 tailwind가 next와 잘 맞지 않나 싶다.

저런 커스텀 스타일을 만들어두고, Root에 위치한 globals.css에 추가를 하면 next의 모든 페이지는 레이어드되어있기 때문에 해당 클래스명을 사용하면 css가 적용되는 것이다.

뭐 어쨌든 처음엔 왜 지원을 안하는건지 싶었다. 이슈도 이미 생성되어있었고 원하는사람도 많았는데...

추가하는 법이 어렵진 않아 쉽게 적용할 수 있었다.