Tailwind V4.1 달라진 점

 

저번 시간에 우연히 발견한 베타 버전이 아닌 정식 4.0버전의 릴리즈

 

공식 홈페이지를 가면 4.1버전이 나온 것을 볼 수 있다. 4.0보다는 변경사항이 적으나 그래도 신기한게 몇가지 있어 나열해보자면

 

4.1 버전의 변경점

 

1. text-shadow

 

text-shadow-색상 지정을 통해 텍스트 그림자를 적용할 수 있게 되었다.

제목이나 강조하고픈 텍스트에 스타일링 적용하면 좋을 것 같은 유틸리티이다. 예전엔 글꼴을 특이한걸 고르거나 같은 글씨체에 relative와 absolute를 활용해 위와같이 표현할 수 있었는데 간편한 거 같다.

 

 

2. mask

css 마스킹 기능을 활용가능한 유틸리티로 이미지 혹은 그라데이션을 통해 요소를 가리거나 드러낼 수 있게 되었다.

 

 

3. 향상된 이전 브라우저 호환성

 

최신 기능들이 여러 브라우저에서 안정적으로 작동하도록 개선되었다고 한다.

 

OKLCH색상 체계(밝기, 채도, 색조로 색을 표현)를 지원하지 않는 브라우저를 위해 폴백 처리가 추가되었다고 한다.

 

예시를 보니 사파리에서 문제가 있었나보다.

 

4. 세밀한 텍스트 줄 바꿈 제어 (overflow-wrap)

 

긴 단어나 URL로 인해 레이아웃이 깨지는 것을 방지하고자 도입된 유틸리티

 

이전 줄바꿈 유틸리티는 break로 (normal, words, all, keep) 줄바꿈 동작 전체를 조절하기에 내부에서 overflow-wrap과 workd-break를 동시에 설정하는 경우가 많았다.

 

이젠 wrap-break-word, wrap-anywhere등 상황에 맞게 사용하면 된다. (한 단어가 긴경우, 이메일이 들어간 경우 등)

 

5. 색상 지정가능한 그림자 (drop-shadow-*)

 

 

이건 좀 신기했는데 그림자 색상이 지금까지 지정이 안됐다니 난 그냥 지금껏 생각 없이 shadow-lg, shadow-lg를 쓰곤 했는데 요즘엔 글래스 모피즘이나 클레이 모피즘 등 다양한 곳에서 색상 그림자가 활용되어서 그런거 같다

 

 

6. 입력 장치별 스타일 (pointer-*, any-pointer-*)

 

터치 장치나 마우스같은 입력 장치종류에 따라 스타일을 따로 적용할 수 있는 유틸리티이다. 

 

이거 꽤 신기하다 키보드로 요소를 선택할때와 마우스로 선택할 때 모두 다르게 적용된다.

 

그렇다는건 같은 버튼을 클릭하므로 발생하는 이벤트가 다 다르게 인식된다는건데 신기하다 웹앱같은 곳에 쓰이면 좋을 것 같다

 

7. 마지막 기준선 정렬 (items-baseline-last, self-baseline-last)

 

Flex나 Grid레이아웃에서 요소들을 마지막 텍스트 기준선에 맞춰 정렬이 가능한 유틸리티이다.

 

이건 이해가 안되서 코드를 직접 실행해봤다.

     <h1>items-baseline</h1>
      <div className="flex space-x-4 items-baseline bg-gray-100 p-4">
        <div className="text-sm leading-tight">Short</div>
        <div className="text-lg leading-tight">
          Long text
          <br />
          with two lines
        </div>
      </div>
      
      <h1>items-baseline-last</h1>
      <div className="flex space-x-4 items-baseline-last bg-blue-100 p-4 mt-6">
        <div className="text-sm leading-tight">Short</div>
        <div className="text-lg leading-tight">
          Long text
          <br />
          with two lines
        </div>
      </div>

 

보이는 그대로 items-baseline-last는 기본형과 다르게 자식요소의 마지막 줄 기준의 baseline으로 정렬을한다

 

굳이 div로 따로묶어 items-end를 지정해주지 않아도 되니 편한 유틸리티이다.

 

 

8. 안전한 정렬 (safe-*)

 

Flex나 Grid레이아웃에서 콘텐츠가 공간부족시 사라지는 경우를 방지하며 정렬할 수 있도록 했다.

 

safe-items-*, safe-justify-*와 같이 사용할 수 있다.

 

9. @source 지시어 개선

 

@source not <경로>를 통해 특정 경로의 tailwind css의 검색대상에서 제외해 빌드 성능을 향상 시킬 수 있다.

 

전에 safelist를 tailwind.config.js를 사용한적이 있었는데 이것또한 @source를 통해서도 할 수 있게 바뀌었다.

 

@source inline(...): 특정 유틸리티를 명시적으로 포함(safelist)하여 런타임에 동적으로 클래스가 추가되는 경우에도 스타일이 적용되도록 바뀌었다.

 

 

10. 기타 개선사항

 

이외에도 사용되지 않는 색상 유틸리티 삭제, user-valid, invalid를 통한 required의 동적 스타일링, noscript를 통한 js 적용유무에 따른 동적 스타일링 등이 추가되고 변경되었다.

 

결국 오늘도 어찌저찌하다보니 4.0버전 업데이트가아닌 4.1 버전에서 이루어진 업데이트 만을 다루고 끝났다.

 

Next나 React도 이렇게 업데이트 내용을 상세하게 본적이 없는데 뭔가 로직적인 업데이트 보단 눈에 보이는 스타일링에 대한 부분들이라 그런지 재밌게 본 거 같다.

 

개인적으로 알아보며 느낀 점은 이렇게 업데이트 마다 변경점들이 많은데 React18, 19 나 Next 14, 15도 반드시 꼼꼼하게 복기하며 어떤게 사라지고 새로 생겼으며 왜 그런지에 대해서도 알아야 할 필요가 있을 거 같다.

 

내일은 꼭 4.0 복습을 하기를 바라며 끝