Tailwind CSS v3.0 - Tailwind CSS

Tailwind CSS v3.0이 출시되었습니다. 놀라운 성능 향상, 큰 워크플로우 개선, 그리고 정말 엄청난 수의 새로운 기능들을 소개합니다.

가장 멋진 새로운 기능들을 살펴보려면, YouTube 채널의 “Tailwind CSS v3.0의 새로운 기능” 비디오를 확인해 보세요.

Tailwind CSS v3.0은 지금까지 가장 흥미로운 릴리스입니다. 다음과 같은 개선 사항들이 포함되어 있습니다:

항상 Just-in-Time — 번개처럼 빠른 빌드 시간, 스택 가능한 변형, 임의 값 지원, 더 나은 브라우저 성능 등.
모든 색상 즉시 사용 가능 — cyan, rose, fuchsia, lime과 같은 확장 팔레트 색상과 50가지의 ~~grey~~ gray 색조를 포함.
색상 박스 그림자 — 재미있는 빛과 반사 효과, 그리고 색상 배경에 더 자연스러운 그림자.
스크롤 스냅 API — CSS만으로 스크롤 스냅을 위한 포괄적이고 합성 가능한 유틸리티 세트.
다중 컬럼 레이아웃 — 드디어 꿈꿔왔던 온라인 신문을 만들 수 있습니다.
네이티브 폼 컨트롤 스타일링 — 체크박스, 라디오 버튼, 파일 입력을 브랜드에 맞게 스타일링.
프린트 수정자 — HTML에서 바로 사이트가 인쇄될 때의 모습을 제어.
모던 종횡비 API — 더 이상 패딩 핵이 필요 없습니다. Safari 14를 지원해야 한다면 여전히 필요하지만요.
멋진 밑줄 스타일 — 사이드 프로젝트를 성공적으로 이끌기 위한 마지막 퍼즐 조각.
RTL 및 LTR 수정자 — 다국어 웹사이트를 구축할 때 완벽한 제어.
세로 및 가로 수정자 — 정말 쉽게 추가할 수 있어서 넣었습니다.
임의 속성 — 이제 Tailwind는 우리가 들어본 적도 없는 CSS 속성도 지원합니다.
Play CDN — 브라우저에서 바로 실행되는 CDN 스크립트로 압축된 새로운 Just-in-Time 엔진.
수많은 다른 유틸리티 — touch-action, will-change, flex-basis, text-indent, scroll-behavior 등을 포함.

또한, 모든 페이지에 개선된 콘텐츠와 예제가 가득한 아름답고 새로운 문서 웹사이트도 함께 제공됩니다.

오늘 바로 Tailwind CSS v3.0을 사용해 보려면, npm에서 최신 릴리스를 받아보세요:

npm install -D tailwindcss@latest postcss autoprefixer

…또는 Tailwind Play로 이동하여 브라우저에서 바로 최신 기능을 시험해 보세요.

Tailwind CSS v3.0은 프레임워크의 새로운 주요 버전이며, 몇 가지 작은 호환성 변경 사항이 있습니다. 하지만 업그레이드 과정을 최대한 원활하게 만들기 위해 많은 노력을 기울였으며, 대부분의 프로젝트에서는 변경 없이 v3.0을 설치할 수 있을 것입니다.

예를 들어, Tailwind UI는 아마도 지구상에서 가장 큰 Tailwind 프로젝트일 것입니다. 모든 템플릿은 v2와 v3 모두와 완벽하게 호환되며, 변경이 필요하지 않습니다.

v3.0으로 마이그레이션하는 방법에 대한 자세한 내용과 단계별 지침은 업그레이드 가이드를 확인하세요.

Just-in-Time, 항상 준비된

3월에 우리는 Just-in-Time 엔진을 소개하며 큰 성능 향상을 이루었습니다. 이 엔진은 임의 값 사용과 같은 흥미로운 기능을 가능하게 했고, 복잡한 변형 설정을 과거의 일로 만들었습니다.

Tailwind CSS v3.0에서는 이 새로운 엔진이 안정화되어 기존 엔진을 대체했습니다. 이제 모든 Tailwind 프로젝트는 별도의 설정 없이도 이러한 개선 사항을 누릴 수 있습니다.

기본 제공되는 모든 색상

새로운 엔진 이전에는 개발 과정에서 CSS 파일 크기를 항상 신경 써야 했고, 가장 큰 절충점 중 하나는 색상 팔레트를 신중하게 제한하는 것이었습니다.

v3.0에서는 라임, 사이안, 스카이, 푸시아, 로즈를 포함한 확장된 색상 팔레트의 모든 색상이 기본적으로 활성화되어 있습니다. 또한 회색의 50가지 색조도 제공됩니다.

더 자세한 내용은 색상 팔레트 참조를 확인해 보세요.

컬러 박스 쉐도우

사람들은 몇 년 동안 컬러 쉐도우를 요청해왔지만, 이를 합리적이고 조합 가능한 방식으로 지원하는 것은 생각보다 훨씬 어려웠습니다.

약 다섯 번의 시도 끝에 마침내 마음에 드는 접근 방식을 찾았고, 이제 Tailwind CSS v3.0에는 컬러 쉐도우가 포함되었습니다:

shadow-cyan-500/50

shadow-blue-500/50

shadow-indigo-500/50

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

더 자세한 내용은 Box Shadow Color 문서에서 확인할 수 있습니다.

Scroll snap API

CSS Scroll Snap 모듈을 위한 포괄적인 유틸리티 세트를 추가했습니다. 이를 통해 HTML에서 바로 풍부한 스크롤 스냅 경험을 구축할 수 있습니다.

이미지 그리드에서 스크롤하여 예상 동작을 확인하세요

스냅 포인트

<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
  <div class="snap-center ...">
    <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  </div>
</div>

새로운 Scroll Margin 유틸리티부터 시작하여 전체 API를 살펴보며 더 자세히 알아보세요.

다중 컬럼 레이아웃

우리는 신문 레이아웃과 같은 컬럼 기능을 지원합니다. 이 기능은 실제로 매우 유용하며, 푸터 네비게이션 레이아웃과 같은 곳에서도 잘 활용할 수 있습니다.

Expedita quo ea quod laborum ullam ipsum enim. Deleniti commodi et. Nam id laborum placeat natus eum. Aliquid aut aut soluta nesciunt culpa magni. Velit possimus autem et aut repudiandae culpa rerum. Qui blanditiis ut qui quia expedita necessitatibus sed. Autem sed ut saepe doloremque aut placeat voluptas ipsum.

Eligendi error nisi recusandae velit numquam nihil aperiam enim. Eum et molestias. Id qui cum veritatis id ea quidem ea rerum saepe. Iste itaque fugiat sequi. Voluptatem quae minus. Maxime ullam ea praesentium recusandae vero est quas. Quia minima fugiat aut laborum impedit facere autem sit qui. Et eos et ullam necessitatibus. Ut voluptatem saepe natus itaque maiores sit repellat aut natus assumenda.

Blanditiis ipsa officia dolores exercitationem nemo beatae voluptatem eos rerum velit asperiores. Non quisquam accusantium officia nisi eius necessitatibus.

Quaerat quia ad voluptatem laudantium natus. Aut ipsa et numquam delectus aliquam. Recusandae libero consequatur dolorum. Animi culpa rerum molestiae ut non et molestias aliquid aut nemo. Sint dolorem dolorem. Iure dolorum amet ea sit perferendis.

Et illum ut officia nisi commodi. Quia et mollitia possimus modi. Delectus aliquid quam eos consectetur.

Accusantium et et qui non sed modi. Corrupti deserunt culpa eos vitae neque aperiam. Repellat tenetur fugit.

Deleniti distinctio ad corrupti nisi. Mollitia qui est natus cumque. Officia dolor qui perferendis necessitatibus saepe excepturi asperiores quos voluptas. Est suscipit facere nihil expedita suscipit quibusdam. Quod cupiditate vero distinctio. Sed est soluta nostrum magnam et saepe blanditiis aut. Vero dolores repellendus et libero minima explicabo provident. Culpa aut dolorem est.

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

컬럼 문서에서 더 자세히 알아보세요. 또한 새로운 break-after/inside/before 유틸리티도 확인해 보세요.

네이티브 폼 컨트롤 스타일링

새로운 accent-color 속성과 파일 입력 버튼 스타일링을 위한 수정자를 추가해, 네이티브 폼 컨트롤에 여러분만의 스타일을 쉽게 적용할 수 있게 되었습니다:

<form>
  <div class="flex items-center space-x-6">
    <div class="shrink-0">
      <img class="h-16 w-16 object-cover rounded-full" src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80" alt="Current profile photo" />
    </div>
    <label class="block">
      <span class="sr-only">프로필 사진 선택</span>
      <input type="file" class="block w-full text-sm text-slate-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-full file:border-0
        file:text-sm file:font-semibold
        file:bg-violet-50 file:text-violet-700
        hover:file:bg-violet-100
      "/>
    </label>
  </div>
  <label class="mt-6 flex items-center justify-center space-x-2 text-sm font-medium text-slate-600">
    <input type="checkbox" class="accent-violet-500" checked/>
    <span>네, 모든 업데이트를 받겠습니다</span>
  </label>
</form>

더 자세한 내용은 accent color와 file input buttons 문서에서 확인할 수 있습니다.

Print modifier

새로운 print 수식어를 사용하면 사이트를 인쇄할 때 어떻게 보여야 하는지 스타일을 지정할 수 있습니다:

<div>
  <article class="print:hidden">
    <h1>나의 비밀 피자 레시피</h1>
    <p>이 레시피는 비밀이며, 누구와도 공유해서는 안 됩니다</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">
    정말로 이걸 인쇄하려고요? 이건 비밀입니다!
  </div>
</div>

”인쇄 스타일 문서에서 더 알아보세요”라고 말하고 싶지만, 사실 그렇지 않습니다.

모던 종횡비(aspect-ratio) API

이제 새로운 네이티브 aspect-ratio 속성을 지원합니다. 이 속성은 점점 더 많은 브라우저에서 안정적으로 지원되기 시작했습니다:

<iframe class="w-full aspect-video ..." src="https://www.youtube.com/..."></iframe>

더 자세한 내용은 종횡비(aspect ratio) 문서에서 확인할 수 있습니다.

멋진 밑줄 스타일

이제 밑줄 색상, 두께 등을 변경할 수 있습니다:

저는 타투인에 거주하는 우주 엔지니어 Derek입니다. 저는 My Company, Inc에서 X-Wing을 만드는 것을 좋아합니다. 일 외에는 포드레이싱을 보거나 라이트세이버 대결을 즐깁니다.

<p>
  저는 타투인에 거주하는 우주 엔지니어 Derek입니다. 저는
  <a href="#" class="underline decoration-sky-500 decoration-2">My Company, Inc</a>에서 X-Wing을 만드는 것을 좋아합니다. 일 외에는
  <a href="#" class="underline decoration-pink-500 decoration-dotted decoration-2">포드레이싱</a>을 보거나
  <a href="#" class="underline decoration-indigo-500 decoration-wavy decoration-2">라이트세이버</a> 대결을 즐깁니다.
</p>

더 자세한 내용은 텍스트 장식 색상, 텍스트 장식 스타일, 텍스트 장식 두께, 그리고 텍스트 밑줄 오프셋 문서를 참고하세요.

RTL과 LTR 수정자

새로운 rtl과 ltr 수정자를 통해 다국어 레이아웃에 대한 실험적 지원을 추가했습니다:

왼쪽에서 오른쪽

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">
    <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">
    <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>

더 자세한 내용은 RTL 지원 문서에서 확인할 수 있습니다.

세로 및 가로 방향 수정자

뷰포트가 특정 방향일 때 스타일을 조건부로 추가하려면 새로운 portrait 및 landscape 수정자를 사용하세요:

<div>
  <div class="portrait:hidden">
    <!-- ... -->
  </div>
  <div class="landscape:hidden">
    <p>
      이 경험은 가로 방향으로 보기 위해 설계되었습니다. 사이트를 보려면 기기를 회전해 주세요.
    </p>
  </div>
</div>

이 기능에 대한 문서는 이 글의 이 섹션보다 내용이 더 적습니다.

임의 속성

이것은 원칙적으로 허용되지 않을 수 있지만, hover, lg와 같은 수식어와 함께 완전히 임의의 CSS를 추가할 수 있도록 만들었습니다:

<div class="[mask-type:luminance] hover:[mask-type:alpha]">
  <!-- ... -->
</div>

이것은 인라인 스타일이 성장했을 때 원하는 모습입니다. 더 자세한 내용은 임의 속성 문서에서 확인할 수 있습니다.

Play CDN

Tailwind CSS v3.0에서는 CSS 기반의 CDN 빌드를 합리적으로 만들 수 없어서 다른 방법을 선택해야 했습니다. 그래서 우리는 자바스크립트 라이브러리를 만들었습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn.tailwindcss.com/"></script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

이 스크립트 태그를 HTML 문서에 추가하면 브라우저에서 바로 모든 Tailwind 기능을 사용할 수 있습니다. 이는 개발 목적으로만 사용되지만, 작은 데모를 만들거나 새로운 아이디어를 시도해 보기에 재미있는 방법입니다.

더 자세한 내용은 Play CDN 문서에서 확인할 수 있습니다.

이것이 바로 Tailwind CSS v3.0입니다! 새로운 문서 사이트로 이동하여 오늘 바로 시작해 보세요.

모든 변경 사항을 확인하려면 GitHub의 변경 로그를 참고하세요.