Tailwind CSS v2.1

Tailwind CSS v2.0 이후 첫 번째 기능 업데이트가 도착했습니다. 이번 업데이트에는 다양한 멋진 기능들이 포함되어 있습니다! 새로운 JIT 엔진이 코어에 통합되었고, 합성 가능한 CSS 필터에 대한 퍼스트클래스 지원이 추가되었으며, 블렌딩 모드 유틸리티와 더 많은 기능들이 포함되었습니다.

주요 하이라이트는 다음과 같습니다:

• 코어에 통합된 JIT 엔진
• 합성 가능한 CSS 필터 API
• 새로운 블렌딩 모드 유틸리티
• 새로운 격리 유틸리티

자세한 내용은 GitHub의 릴리스 노트를 확인하세요.

​코어에 통합된 JIT 엔진

3월에 발표한 새로운 JIT 엔진이 이제 코어에 통합되었습니다. tailwind.config.js 파일에서 새로운 mode 옵션을 사용해 선택적으로 활성화할 수 있습니다.

module.exports = {
  mode: 'jit',
  purge: [
    // ...
  ],
  // ...
}

이 기능은 아직 프리뷰 단계이므로 세부 사항이 변경될 수 있으며, 시맨틱 버저닝의 적용을 받지 않습니다.

이전에 @tailwindcss/jit를 사용하셨다면, 이제 Tailwind CSS v2.1로 마이그레이션할 수 있습니다. 모든 새로운 개발은 이 버전에서 진행될 예정입니다.

자세한 내용은 Just-in-Time Mode 문서를 참고하세요.

​합성 가능한 CSS 필터 API

이번에는 정말 큰 기능이 추가되었습니다. 드디어 CSS 필터를 퍼스트클래스 기능으로 지원하기 시작했습니다!

이 기능은 transform 유틸리티와 비슷하게 동작합니다. filter를 사용해 필터를 활성화하고, grayscale, blur-lg, saturate-200 같은 유틸리티와 조합해 즉석에서 필터를 합성할 수 있습니다.

filter는 다음과 같이 사용합니다:

<div class="filter blur-md grayscale invert ...">
  <!-- ... -->
</div>

backdrop-filter는 이렇게 사용합니다:

<div class="backdrop-filter backdrop-blur backdrop-brightness-50 ...">
  <!-- ... -->
</div>

더 자세한 내용은 filter와 backdrop-filter 문서를 참고하세요. 곧 유용한 시각적 예제를 추가할 예정입니다!

​새로운 블렌딩 모드 유틸리티

mix-blend-mode와 background-blend-mode를 위한 새로운 유틸리티를 추가했습니다:

<div class="mix-blend-multiply ...">
  <!-- ... -->
</div>

더 자세한 내용은 문서를 참고하세요.

​새로운 격리 유틸리티

isolation 속성을 다루기 위한 새로운 isolate와 isolation-auto 유틸리티를 추가했습니다:

<div class="isolate ...">
  <!-- ... -->
</div>

이 기능은 블렌딩 모드 기능이나 z-index 조정을 범위로 제한할 때 매우 유용하며 강력합니다. 더 자세한 내용은 문서를 참고하세요.

또한, Josh Comeau의 훌륭한 글을 통해 실제 사용 예시를 확인해 보는 것을 추천합니다.

​업그레이드

Tailwind CSS v2.1은 기존 기능을 유지한 채 점진적으로 개선된 버전입니다. 따라서 업그레이드하려면 다음 명령어를 실행하면 됩니다.

npm install tailwindcss@latest

이전에 @tailwindcss/jit를 사용했다면, 이제 tailwindcss로 다시 전환하고 PostCSS 설정을 업데이트하면 됩니다.

업그레이드할 준비가 되셨나요? npm에서 다운로드 →