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 또는 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과 같은 새로운 유틸리티를 사용하면 엘리먼트의 _시작_과 _끝_을 스타일링할 수 있습니다. 이렇게 하면 ltr:ml-3 rtl:mr-3과 같은 코드를 작성하지 않아도 RTL에서 스타일이 자동으로 적용됩니다.

왼쪽에서 오른쪽

Tom Cook

Director of Operations

오른쪽에서 왼쪽

تامر كرم

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

<div class="group flex items-center">  <img class="h-12 w-12 shrink-0 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"        dark-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-700"        dark-class="text-sm font-medium text-slate-500 group-hover:text-slate-300"      >        ...      </p>    </div>  </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-* 같은 더 이상 사용되지 않는 기능을 사용하지만, 모든 브라우저에서 작동하며 앞으로도 계속 작동할 것입니다. 그래서 이 기능을 프레임워크 자체에 내장하기로 결정했습니다.

2020년 3월 10일

전환율 높이기

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">2020년 3월 10일</time>    <h2 class="mt-2 text-lg font-semibold text-gray-900">전환율 높이기</h2>    >    <p class="mt-4 line-clamp-3 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 leading-6 font-semibold 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 문서를 확인하여 작동 방식을 알아보세요.

폰트 크기 유틸리티를 위한 새로운 줄 간격 단축 표기법

Tailwind로 아름다운 디자인을 해온 수년 동안, 우리는 폰트 크기를 설정하지 않고 줄 간격만 설정하는 경우가 거의 없다는 사실을 발견했습니다.

이에 영감을 받아 색상 불투명도 수정자 구문과 유사하게, 폰트 크기와 줄 간격을 함께 설정할 수 있는 단축 표기법을 도입했습니다:

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

여러분은 줄 간격 스케일에 정의된 값을 사용하거나, 디자인 토큰에서 벗어나야 할 경우 임의의 값을 사용할 수 있습니다:

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

더 많은 예제는 폰트 크기 문서를 참고하세요.

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를 사용하고 있습니다. 이 폰트는 광학 크기 축(optical size axis)을 사용하여 헤드라인과 같은 큰 크기에 최적화된 "Display" 변형을 활성화할 수 있습니다.

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

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

<ul class="list-image-[url(/carrot.png)] ...">  <li>5컵 다진 표고버섯</li>  <!-- ... --></ul>

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

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

새로운 hyphens 유틸리티

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

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

<p class="hyphens-manual ...">... Kraftfahrzeug&shy;haftpflichtversicherung is a ...</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 유틸리티는 없습니다. 크레이머가 기름을 넣지 않고 얼마나 멀리 운전할 수 있는지 시도하는 Seinfeld 에피소드 기억나시나요? 그게 제가 가장 좋아하는 에피소드입니다.