Tailwind CSS v3.4: 동적 뷰포트 단위, :has() 지원, 균형 잡힌 헤드라인, 서브그리드 등

<div>
  <h2>Categories:<h2>
  <ul class="*:rounded-full *:border *:border-sky-100 *:bg-sky-50 *:px-2 *:py-0.5 dark:text-sky-300 dark:*:border-sky-500/15 dark:*:bg-sky-500/10 ...">
    <li>Sales</li>
    <li>Marketing</li>
    <li>SEO</li>
    <!-- ... -->
  </ul>
</div>

일반적으로는 자식 요소를 직접 스타일링하는 것을 권장하지만, 해당 요소를 제어할 수 없거나 요소가 사용되는 컨텍스트에 따라 조건부로 스타일을 조정해야 할 때 유용합니다.

이 기능은 다른 변형과도 조합할 수 있습니다. 예를 들어 hover:*:underline은 자식 요소에 마우스를 올렸을 때 밑줄을 추가합니다.

새로운 UI 키트를 작업하면서 다양한 자식 요소에 조건부로 레이아웃 스타일을 추가하는 멋진 방법을 사용하고 있습니다:

function Field({ children }) {
  return (
    <div className="data-[slot=description]:*:mt-4 ...">
      {children}
    </div>
  )
}

function Description({ children }) {
  return (
    <p data-slot="description" ...>{children}</p>
  )
}

function Example() {
  return (
    <Field>
      <Label>First name</Label>
      <Input />
      <Description>Please tell me you know your own name.</Description>
    </Field>
  )
}

data-[slot=description]:*:mt-4 클래스를 보세요. 먼저 모든 직접적인 자식 요소를 대상으로 하고(*: 부분), 그 중에서 data-slot="description" 속성을 가진 항목만 필터링합니다(data-[slot=description] 사용).

이를 통해 특정 자식 요소만 쉽게 대상으로 할 수 있으며, 임의의 변형을 사용할 필요가 없습니다.

이 기능을 추가한 것을 후회하게 만들 만한 끔찍한 것들을 모두가 만들어 낼 것을 기대합니다.

​새로운 size-* 유틸리티

아바타 크기를 조정할 때마다 h-5 w-5를 입력하는 것이 지겹다는 걸 여러분도 알고, 저도 알고 있습니다.

Tailwind CSS v3.4에서는 드디어 너비와 높이를 동시에 설정할 수 있는 새로운 size-* 유틸리티를 추가했습니다:

<div>
  <img class="h-10 w-10" ...>
  <img class="h-12 w-12" ...>
  <img class="h-14 w-14" ...>
  <img class="size-10" ...>
  <img class="size-12" ...>
  <img class="size-14" ...>
</div>

이 기능을 추가하고 싶었지만 항상 정확한 이름에 대해 고민했습니다. size-*는 w-*나 h-*에 비해 입력하기 번거롭게 느껴졌고, s-*는 너무 암호 같았습니다.

하지만 몇 주 동안 사용해 본 결과, 더 긴 이름에도 불구하고 별도의 너비와 높이 유틸리티보다 훨씬 낫다는 결론을 내렸습니다. 특히 변형과 함께 사용하거나 복잡한 임의 값을 사용할 때 매우 편리합니다.

​text-wrap 유틸리티로 균형 잡힌 헤드라인 만들기

랜딩 페이지에서 작은 섹션 헤드라인이 깔끔하게 줄바꿈되도록 max-width를 조정하거나 반응형 줄바꿈을 추가하는 데 얼마나 많은 시간을 보냈나요? 이제는 그럴 필요가 없습니다. 브라우저가 text-wrap: balance를 사용해 자동으로 처리해줍니다.

<article>
  <h3 class="text-balance ...">맨해튼의 사랑받던 수프 가게 문을 닫다<h3>
  <p>뉴욕 시민들은 올해 겨울 추위를 더욱 체감하고 있습니다...</p>
</article>

또한 text-pretty를 추가했습니다. 이 기능은 text-wrap: pretty를 사용해 문단 끝에 단어가 홀로 남는 것을 방지합니다.

<article class="text-pretty ...">
  <h3>맨해튼의 사랑받던 수프 가게 문을 닫다<h3>
  <p>뉴욕 시민들은 올해 겨울 추위를 더욱 체감하고 있습니다...</p>
</article>

이 기능의 장점은 오래된 브라우저를 사용하는 방문자가 사이트에 접속하더라도 일반적인 줄바꿈 동작으로 대체되기 때문에, 지금 바로 사용해도 안전하다는 점입니다.

​Subgrid 지원

Subgrid는 비교적 최근에 추가된 CSS 기능으로, 엘리먼트가 부모의 그리드 컬럼이나 행을 상속받아 자식 엘리먼트를 부모 그리드에 배치할 수 있게 해줍니다.

<div class="grid grid-cols-4 gap-4">
  <!-- ... -->
  <div class="grid grid-cols-subgrid gap-4 col-span-3">
      <div class="col-start-2">06</div>
  </div>
  <!-- ... -->
</div>

예를 들어, 우리가 작업 중인 새로운 UI 키트에서 드롭다운 메뉴에 subgrid를 사용하고 있습니다. 이렇게 하면 아이템 중 하나에 아이콘이 있더라도 다른 모든 아이템의 텍스트가 정렬되도록 들여쓰기를 유지할 수 있습니다.

<div role="menu" class="grid grid-cols-[auto_1fr]">
  <a href="#" class="grid-cols-subgrid col-span-2">
    <svg class="mr-2">...</svg>
    <span class="col-start-2">Account</span>
  </a>
  <a href="#" class="grid-cols-subgrid col-span-2">
    <svg class="mr-2">...</svg>
    <span class="col-start-2">Settings</span>
  </a>
  <a href="#" class="grid-cols-subgrid col-span-2">
    <span class="col-start-2">Sign out</span>
  </a>
</div>

아이템 중 어느 것도 아이콘이 없을 경우, 첫 번째 컬럼이 0px로 줄어들고 텍스트가 왼쪽으로 정렬됩니다.

subgrid에 대한 자세한 내용은 MDN 문서를 참고하세요. 처음에는 이해하기 조금 까다로울 수 있지만, 한번 이해하면 게임 체인저가 될 것입니다.

​확장된 min-width, max-width, min-height 스케일

드디어 min-width, max-width, min-height 스케일을 전체 간격 스케일로 확장했습니다. 이제 min-w-12 같은 클래스가 실제로 사용 가능합니다:

<div class="min-w-12">
  <!-- ... -->
</div>

v3.0 때 이 작업을 했어야 했는데, 시간이 없어서 미뤄졌네요. 미안하고, 잘 써주세요.

​확장된 투명도 스케일

기본적으로 5단계마다 모든 단계를 포함하도록 투명도 스케일을 확장했습니다:

<div class="opacity-35">
  <!-- ... -->
</div>

이제 마크업에서 임의의 값을 덜 사용할 수 있길 바랍니다. 다음은 2.5%를 노리고 있습니다.

​확장된 grid-rows-* 스케일

기본 제공되는 그리드 행의 수를 6에서 12로 늘렸습니다. 이유는 간단합니다: 그냥 해봤어요.

<div class="grid grid-rows-9">
  <!-- ... -->
</div>

다음 릴리스에서는 더 과감하게 16까지 늘릴지도 모릅니다.

​새로운 forced-colors 변형

강제 색상 모드(forced colors mode)를 들어본 적이 있나요? 여러분의 사이트가 이 모드에서 상당히 이상하게 보일 가능성이 높습니다.

하지만 이제는 우리를 탓할 수 없습니다. Tailwind CSS v3.4에는 강제 색상 모드에서 스타일을 조정하기 위한 forced-colors 변형이 포함되었기 때문입니다:

<form>
  <input type="checkbox" class="appearance-none forced-colors:appearance-auto ...">
</form>

이 기능은 완전히 커스텀한 컨트롤을 미세 조정할 때 특히 유용합니다. 특히 CSS 시스템 색상에 대한 지식과 임의의 값을 함께 사용하면 더욱 효과적입니다.

​새로운 forced-color-adjust 유틸리티

디자인이 강제 색상 모드에서 어떻게 영향을 받는지 제어하기 위해 forced-color-adjust-auto와 forced-color-adjust-none 유틸리티를 추가했습니다:

<fieldset>
  <legend>색상 선택</legend>
  <div class="forced-color-adjust-none ...">
    <label>
      <input class="sr-only" type="radio" name="color-choice" value="white" />
      <span class="sr-only">흰색</span>
      <span class="size-6 rounded-full bg-white"></span>
    </label>
    <label>
      <input class="sr-only" type="radio" name="color-choice" value="gray" />
      <span class="sr-only">회색</span>
      <span class="size-6 rounded-full bg-gray-300"></span>
    </label>
    <!-- ... -->
  </div>
</fieldset>

이 유틸리티는 매우 드물게 사용해야 하지만, 온라인 스토어에서 구매하는 물건의 색상을 선택하는 것처럼 특정 색상으로 렌더링되는 것이 중요한 경우에 유용할 수 있습니다.

강제 색상에 대해 더 알아보려면 Polypane 블로그의 “강제 색상 설명: 실용 가이드”를 읽어보는 것을 추천합니다. 이 주제에 대해 가장 유용한 글 중 하나입니다.

주의 깊게 지켜본 분이라면, 올여름 Tailwind Connect에서 미리 보여준 Oxide 엔진 개선 사항에 대해 궁금해할 수 있습니다.

원래 이 개선 사항은 v3.4에 포함될 예정이었지만, 몇 가지 해결해야 할 문제가 남아 있고 다른 많은 개선 사항들이 쌓여 있어서 이를 모두 출시하는 것이 더 합리적이라고 판단했습니다. Oxide 관련 기능은 여전히 진행 중이며, 새해에 출시될 다음 Tailwind CSS 버전의 주요 개선 사항이 될 것입니다.

그동안, npm을 통해 최신 버전으로 업데이트하여 Tailwind CSS v3.4를 사용해보세요:

$ npm install tailwindcss@latest

:has()와 새로운 * 변형을 사용하면, HTML이 이전보다 더 복잡해질 것입니다.