Tailwind CSS v3.3: 확장된 색상 팔레트, ESM/TS 지원, 논리적 속성 등

Tailwind CSS v3.3이 출시되었습니다. 오랫동안 요청받았던 기능들과 여러분이 원하는지도 몰랐던 새로운 기능들이 추가되었습니다.

• 더 어두운 색상을 위한 확장된 색상 팔레트: 모든 색상에 대해 더 어두운 950 색조가 추가되었습니다.
• ESM 및 TypeScript 지원: ESM 또는 TypeScript를 사용하여 설정 파일을 작성할 수 있습니다.
• 논리적 속성을 통한 간소화된 RTL 지원: 다양한 방향에 적응하는 레이아웃을 구축할 수 있습니다.
• 그라데이션 색상 정지 위치 세밀 조정: 각 색상 정지 위치를 정확히 지정할 수 있습니다.
• 기본 제공되는 라인 클램프: 플러그인 없이도 여러 줄 텍스트를 잘라낼 수 있습니다.
• 새로운 줄 높이 단축 속성: 한 클래스로 글꼴 크기와 줄 높이를 설정할 수 있습니다.
• var() 없이 사용하는 CSS 변수: 임의 값에 대한 새로운 단축 구문.
• 설정 가능한 font-variation-settings: font-* 유틸리티에 직접 통합되었습니다.
• 새로운 list-style-image 유틸리티: 끔찍한 클립 아트를 불릿 포인트로 사용할 수 있습니다.
• 새로운 hyphens 유틸리티: 하이픈화 동작을 세밀하게 조정할 수 있습니다.
• 새로운 caption-side 유틸리티: 스타일리시하게 테이블 제목을 지정할 수 있습니다.

가장 흥미로운 기능들을 소개했지만, 모든 개선 사항을 확인하려면 릴리스 노트를 참고하세요.

프로젝트를 업그레이드하는 것은 npm에서 최신 버전의 tailwindcss를 설치하는 것만큼 쉽습니다:

npm install -D tailwindcss@latest

브라우저에서 바로 Tailwind Play를 통해 모든 새로운 기능을 시험해 볼 수도 있습니다.

​더 어두운 어두운 색상을 위한 확장된 색상 팔레트

지난 몇 년 동안 가장 많이 요청받은 기능 중 하나는 모든 색상에 더 어두운 음영을 추가하는 것이었습니다. 주로 누군가가 다크 UI를 구축하고 있고 스펙트럼의 어두운 부분에서 더 많은 옵션을 원하기 때문이었죠.

이제 그 소원이 이루어졌습니다. Tailwind CSS v3.3에서는 모든 색상에 새로운 950 음영을 추가했습니다.

회색 계열에서는 기본적으로 틴트가 적용된 검정색처럼 작동하며, 이는 초고대비 UI에 적합합니다:

그리고 나머지 색상 스펙트럼에서는 950을 고대비 텍스트와 틴트가 적용된 컨트롤 배경에 최적화했습니다:

믿기 어렵겠지만, 이 프로젝트에서 가장 어려운 부분은 색상당 11개의 음영을 사용하는 것에 대해 스스로를 설득하는 것이었습니다. 색상 팔레트 문서에서 이를 멋지게 보이게 만드는 것은 악몽이었죠.

또한, 우리가 예전에 할 수 있었던 50가지 회색 농담을 위해 한 잔 부어줍시다.

​ESM과 TypeScript 지원

이제 Tailwind CSS를 ESM(ES Module)이나 TypeScript로 설정할 수 있습니다:

/** @type {import('tailwindcss').Config} */
export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

npx tailwindcss init을 실행하면, 프로젝트가 ES Module인지 자동으로 감지하고 적절한 문법으로 설정 파일을 생성합니다.

ESM 설정 파일을 명시적으로 생성하려면 --esm 플래그를 사용하세요:

npx tailwindcss init --esm

TypeScript 설정 파일을 생성하려면 --ts 플래그를 사용하세요:

npx tailwindcss init --ts

많은 사람들이 이미 ESM으로 코드를 작성하고 있기 때문에(빌드 도구에 의해 트랜스파일되더라도) 이 작업이 쉬울 거라고 생각하지만, 실제로는 꽤 까다롭습니다. 우리는 설정 파일을 실시간으로 트랜스파일해야 합니다.

TypeScript의 경우를 생각하면 이 작업이 왜 필요한지 이해하기 더 쉽습니다. Tailwind는 JavaScript로 배포되기 때문에, 컴파일되지 않은 TypeScript 파일을 마법처럼 가져올 수는 없습니다.

이 작업은 jiti 라이브러리를 사용하여 처리하며, Sucrase를 사용해 최고의 성능을 유지하면서 설치 용량을 작게 유지합니다.

​논리적 속성을 통한 간소화된 RTL 지원

우리는 이미 LTR 및 RTL 변형을 사용해 다국어 웹사이트를 스타일링할 수 있게 했지만, 이제는 논리적 속성을 사용해 더 쉽고 자동으로 스타일링할 수 있습니다.

ms-3 및 me-3과 같은 새로운 유틸리티를 사용하면 엘리먼트의 _시작_과 _끝_을 스타일링할 수 있으며, 이렇게 하면 RTL에서도 스타일이 자동으로 적용됩니다. 이전처럼 ltr:ml-3 rtl:mr-3과 같은 코드를 작성할 필요가 없습니다.

왼쪽에서 오른쪽

Tom Cook

Director of Operations

오른쪽에서 왼쪽

تامر كرم

الرئيس التنفيذي

<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
  <div class="ms-3">
    <p class="text-sm font-medium text-slate-700 group-hover:text-slate-900">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-700">...</p>
  </div>
</div>
<div class="group flex items-center">
  <img class="shrink-0 h-12 w-12 rounded-full" src="..." alt="" />
  <div class="ltr:ml-3 rtl:mr-3">
  <div class="ms-3">
    <p class="text-sm font-medium text-slate-300 group-hover:text-white">...</p>
    <p class="text-sm font-medium text-slate-500 group-hover:text-slate-300">...</p>
  </div>
</div>

우리는 inset, margin, padding, border-radius, scroll-margin, scroll-padding을 위한 새로운 논리적 속성 유틸리티를 추가했습니다.

다음은 추가된 새로운 유틸리티와 그에 대응하는 물리적 속성의 전체 목록입니다.

이러한 유틸리티는 LTR과 RTL 언어를 모두 지원해야 하는 사이트를 정기적으로 구축하는 경우 많은 코드를 절약할 수 있으며, 더 많은 제어가 필요할 때는 ltr 및 rtl 변형과 함께 사용할 수도 있습니다.

​그라데이션 색상 정지점 위치 조정

from-5%, via-35%, to-85%와 같은 새로운 유틸리티를 추가하여 그라데이션의 각 색상 정지점 위치를 조정할 수 있습니다:

<div class="bg-gradient-to-r from-indigo-500 from-10% via-purple-500 via-30% to-pink-500 to-90% ...">
  <!-- ... -->
</div>

기본적으로 0%부터 100%까지 5% 단위로 모든 값을 제공하지만, 원하는 효과를 얻기 위해 임의의 값을 사용할 수도 있습니다:

<div class="bg-gradient-to-r from-cyan-400 from-[21.56%] ...">
  <!-- ... -->
</div>

더 자세한 내용은 그라데이션 색상 정지점 문서를 참고하세요.

​기본 제공되는 Line-clamp 기능

우리는 약 2년 전에 공식 line-clamp 플러그인을 출시했습니다. 이 플러그인은 이상하게도 더 이상 사용되지 않는 -webkit-* 속성을 사용하지만, 모든 브라우저에서 작동하며 앞으로도 계속 작동할 것입니다. 그래서 이 기능을 프레임워크 자체에 포함시키기로 결정했습니다.

Mar 10, 2020

Boost your conversion rate

Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.

Lindsay Walton

<article>
  <div>
    <time datetime="2020-03-16" class="block text-sm/6 text-gray-600">Mar 10, 2020</time>
    <h2 class="mt-2 text-lg font-semibold text-gray-900">Boost your conversion rate</h2>
    <p class="line-clamp-3 mt-4 text-sm/6 text-gray-600">
      Nulla dolor velit adipisicing duis excepteur esse in duis nostrud occaecat mollit incididunt deserunt sunt. Ut ut sunt laborum ex occaecat eu tempor labore enim adipisicing minim ad. Est in quis eu dolore occaecat excepteur fugiat dolore nisi aliqua fugiat enim ut cillum. Labore enim duis nostrud eu. Est ut eiusmod consequat irure quis deserunt ex. Enim laboris dolor magna pariatur. Dolor et ad sint voluptate sunt elit mollit officia ad enim sit consectetur enim.
    </p>
  </div>
  <div class="mt-4 flex gap-x-2.5 text-sm font-semibold leading-6 text-gray-900">
    <img src="..." class="h-6 w-6 flex-none rounded-full bg-gray-50" />
    Lindsay Walton
  </div>
</article>

따라서 v3.3으로 업그레이드하면, 기존에 line-clamp 플러그인을 사용하고 있었다면 안전하게 제거할 수 있습니다:

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/line-clamp')
  ]
}

이제 이 플러그인은 더 이상 필요 없습니다.

이전에 line-clamp를 사용해본 적이 없다면, 새로운 line-clamp 문서를 확인하여 작동 방식을 알아보세요.

​font-size 유틸리티를 위한 새로운 line-height 단축 문법

Tailwind로 아름다운 디자인을 수년간 해오면서 발견한 한 가지는, font-size를 설정할 때 항상 line-height도 함께 설정한다는 점입니다.

이러한 경험을 바탕으로, 색상 불투명도 수정자 문법에서 영감을 받아 두 값을 한 번에 설정할 수 있는 단축 문법을 만들었습니다. 이렇게 하면 몇 글자를 더 절약할 수 있습니다.

  <p class="text-lg leading-7 ...">
  <p class="text-lg/7 ...">
    그래서 나는 물속으로 걸어 들어가기 시작했습니다. 여러분께 거짓말하지 않겠습니다. 나는 무서웠어요. 하지만 계속 나아갔고, 파도를 지나면서 이상한 평온함이 찾아왔습니다. 그것이 신의 개입인지, 모든 생명체의 유대감인지는 모르겠지만, 그 순간 나는 제리에게 말했죠. 나는 <em>해양 생물학자</em>였다고요.
  </p>

line-height 스케일에 정의된 어떤 값이든 사용할 수 있으며, 디자인 토큰에서 벗어나야 할 경우 임의의 값을 사용할 수도 있습니다.

<p class="text-sm/[17px] ..."></p>

더 많은 예제는 font size 문서를 참고하세요.

​var() 없이 CSS 변수 사용하기

코드를 더 적게 입력하는 방향으로, CSS 변수를 임의의 값으로 사용할 때 var()를 생략할 수 있게 만들었습니다:

export function MyComponent({ company }) {
  return (
    <div
      style={{
        '--brand-color': company.brandColor,
        '--brand-hover-color': company.brandHoverColor,
      }}
      className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]"
      className="bg-[--brand-color] hover:bg-[--brand-hover-color]"
    />
  )
}

이 방법은 데이터베이스나 다른 곳에서 가져온 스타일을 hover:와 같은 기능과 함께 사용할 때 꽤 유용한 트릭입니다.

​커스텀 폰트 패밀리에 font-variation-settings 설정하기

커스텀 폰트를 사용할 때, 폰트가 제공하는 특정 조정 기능을 활성화하기 위해 font-feature-settings나 font-variation-settings를 설정하고 싶을 때가 있습니다.

우리는 이미 font-feature-settings를 쉽게 설정할 수 있도록 지원해 왔지만, 이제는 설정 파일에서 폰트 목록 뒤에 옵션 객체를 추가하여 font-variation-settings도 동일하게 설정할 수 있습니다.

module.exports = {
  theme: {
    fontFamily: {
      sans: [
        'Inter var, sans-serif',
        {
          fontFeatureSettings: '"cv11", "ss01"',
          fontVariationSettings: '"opsz" 32',
        },
      ],
    },
  },
}

위 예제에서는 최근 릴리스된 Inter를 사용하고 있습니다. 이 폰트는 광학 크기 축을 사용하여 헤드라인과 같은 큰 크기에 최적화된 “Display” 변형을 활성화할 수 있습니다.

​새로운 list-style-image 유틸리티

당근 그림을 리스트 아이템 마커로 사용하고 싶었던 적이 있나요? 이제 새로운 list-image-* 유틸리티를 사용하면 가능합니다.

<ul class="list-image-[url(carrot.png)] ...">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

프레임워크에 채소 클립아트를 포함시키지는 않지만, 원하는 이미지를 임의의 값으로 사용하거나 테마의 listStyleImage 섹션에서 설정할 수 있습니다.

더 자세한 내용은 list style image 문서를 확인하세요.

​새로운 hyphens 유틸리티

­ HTML 엔티티를 들어본 적이 있나요? 저희가 hyphens-* 유틸리티를 추가하기 전까지는 저도 몰랐습니다.

hyphens-manual과 적절히 배치된 ­를 사용하면, 브라우저가 단어를 여러 줄로 나눌 때 하이픈을 어디에 삽입할지 지정할 수 있습니다:

<p class="hyphens-manual ...">
    ... Kraftfahrzeug&shy;haftpflichtversicherung은 ...
</p>

이런 코드 스니펫은 발음하기 어려운 데스 메탈 밴드의 보도 자료에 포함시키면 기자들이 기사에서 하이픈을 잘못 사용하지 않도록 도움을 줄 수 있을 겁니다. 이렇게 하면 마침내 여러분이 유명해지는 기사가 나올 때 하이픈이 제대로 처리될 거예요.

더 자세한 내용은 hyphens 문서를 확인해 보세요.

​새로운 caption-side 유틸리티

저에게도 새로 알게 된 기능인 <caption> 엘리먼트! 이제 테이블 캡션을 상단이나 하단에 배치할 수 있는 새로운 caption-* 유틸리티를 사용할 수 있습니다.

<table>
  <caption class="caption-bottom">
    Table 3.1: Professional wrestlers and their signature moves.
  </caption>
  <thead>
    <tr>
      <th>Wrestler</th>
      <th>Signature Move(s)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>"Stone Cold" Steve Austin</td>
      <td>Stone Cold Stunner, Lou Thesz Press</td>
    </tr>
    <tr>
      <td>Bret "The Hitman" Hart</td>
      <td >The Sharpshooter</td>
    </tr>
    <tr>
      <td>Razor Ramon</td>
      <td>Razor's Edge, Fallaway Slam</td>
    </tr>
  </tbody>
</table>

더 많은 예제는 caption side 문서를 확인해 보세요.

이것이 Tailwind CSS v3.3입니다! 주요 변경 사항 없이 재미있는 새로운 기능들이 추가되었습니다. 오늘 바로 프로젝트에 적용해 보세요. 최신 버전으로 업데이트하려면 npm을 사용하세요:

npm install -D tailwindcss@latest

아직도 text-shadow 유틸리티는 없네요. 크레이머가 기름을 넣지 않고 얼마나 멀리 운전할 수 있는지 시도한 세인펠드 에피소드 기억나시나요? 그게 제가 가장 좋아하는 에피소드입니다.