Tailwind CSS v2.0 이후 첫 번째 기능 업데이트가 도착했습니다. 새로운 JIT 엔진을 코어에 통합하고, 합성 가능한 CSS 필터 지원을 추가했으며, 블렌딩 모드 유틸리티와 더 많은 기능을 포함하고 있습니다.
주요 내용은 다음과 같습니다:
자세한 내용은 GitHub의 릴리스 노트를 확인하세요.
코어에 통합된 JIT 엔진
3월에 발표한 새로운 JIT 엔진이 이제 코어에 통합되었습니다. tailwind.config.js 파일에서 새로운 mode 옵션을 사용해 선택적으로 활성화할 수 있습니다:
module.exports = { mode: "jit", purge: [ // ... ], // ...};이 기능은 아직 프리뷰 단계이므로 세부 사항이 변경될 수 있으며, 시맨틱 버저닝의 적용을 받지 않습니다.
이전에 @tailwindcss/jit를 사용하셨다면, 이제 Tailwind CSS v2.1로 마이그레이션할 수 있습니다. 이 버전에서 엔진의 모든 새로운 개발이 진행될 예정입니다.
자세한 내용은 Just-in-Time 모드 문서를 참고하세요.
합성 가능한 CSS 필터 API
이번에는 정말 큰 기능이 추가되었습니다. 드디어 CSS 필터를 퍼스트클래스 기능으로 지원하기 시작했습니다!
이 기능은 transform 유틸리티와 매우 유사하게 동작합니다. filter를 사용해 필터를 활성화하고, grayscale, blur-lg, saturate-200 같은 유틸리티와 조합해 실시간으로 필터를 합성할 수 있습니다.
<div class="blur-md grayscale invert filter ..."> <!-- ... --></div>그리고 backdrop-filter는 다음과 같이 사용할 수 있습니다.
<div class="backdrop-blur backdrop-brightness-50 backdrop-filter ..."> <!-- ... --></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에서 다운로드 →
이 마이그레이션은 새로운 v4 형식에 맞춰 콘텐츠를 구성하며, 예제와 코드 블록에 지정된 컴포넌트와 코드를 활용합니다.