Tailwind CSS v1.5와 비슷하지만, 이제는 애니메이션 지원, 오버스크롤 유틸리티 등이 추가되었습니다!
여기에는 주요 변경 사항이 없어야 하지만, 지난번에도 그렇게 생각했었습니다. 만약 제가 무언가를 깨뜨렸다면, 첫 번째로 보고한 사람에게 Tailwind 셔츠를 드리겠습니다.
새로운 기능
애니메이션 지원
Tailwind CSS v1.6에서는 새로운 animation 코어 플러그인이 추가되었으며, 기본적으로 4가지 범용 애니메이션이 포함되어 있습니다:
animate-spinanimate-pinganimate-pulseanimate-bounce
<button type="button" class="bg-indigo-600 ..." disabled> <svg class="mr-3 h-5 w-5 animate-spin ..." viewBox="0 0 24 24"> <!-- ... --> </svg> 처리 중</button>이 애니메이션들은 tailwind.config.js 테마의 animation 및 keyframes 섹션을 사용하여 언제나처럼 완전히 커스터마이징할 수 있습니다:
module.exports = { theme: { extend: { animation: { wiggle: "wiggle 1s ease-in-out infinite", }, keyframes: { wiggle: { "0%, 100%": { transform: "rotate(-3deg)" }, "50%": { transform: "rotate(3deg)" }, }, }, }, },};더 많은 정보와 라이브 데모를 보려면 새로운 애니메이션 문서를 참고하세요. 설계 배경에 대한 자세한 내용은 풀 리퀘스트를 확인하세요.
새로운 prefers-reduced-motion 변형
새로운 애니메이션 기능과 함께, prefers-reduced-motion 미디어 기능을 기반으로 CSS를 조건부로 적용할 수 있는 새로운 motion-safe와 motion-reduce 변형을 추가했습니다.
이 기능은 트랜지션과 애니메이션 유틸리티와 함께 사용하여, 움직임에 민감한 사용자를 위해 문제가 될 수 있는 동작을 비활성화하는 데 유용합니다:
<div class="transition duration-150 ease-in-out motion-reduce:transition-none ... ..."></div>또는 명시적으로 움직임을 활성화하여, 움직임을 비활성화하지 않은 사용자에게만 표시되도록 할 수 있습니다:
<div class="duration-150 ease-in-out motion-safe:transition ... ..."></div>이 변형은 반응형 변형 및 의사 클래스 변형과도 결합할 수 있습니다:
<!-- 반응형 변형과 함께 --><div class="sm:motion-reduce:translate-y-0"></div><!-- 의사 클래스 변형과 함께 --><div class="motion-reduce:hover:translate-y-0"></div><!-- 반응형 및 의사 클래스 변형과 함께 --><div class="sm:motion-reduce:hover:translate-y-0"></div>이 변형은 기본적으로 어떤 유틸리티에도 활성화되어 있지 않지만, 필요에 따라 tailwind.config.js 파일의 variants 섹션에서 활성화할 수 있습니다:
module.exports = { // ... variants: { translate: ["responsive", "hover", "focus", "motion-safe", "motion-reduce"], },};더 자세한 내용은 업데이트된 변형 문서를 참조하세요.
새로운 overscroll-behavior 유틸리티
overscroll-behavior 속성을 위한 새로운 유틸리티도 추가했습니다.
이 유틸리티를 사용하면 사이트에서 "스크롤 체이닝"이 어떻게 동작하는지 제어할 수 있으며, 내장된 스크롤 가능 영역의 상단이나 하단에 도달했을 때 전체 페이지가 스크롤되는 것을 방지할 수 있습니다.
<div class="overscroll-y-contain ..."> <!-- ... --></button>현재 이 기능은 Safari에서 지원되지 않지만, 점진적 향상으로 처리해도 큰 문제는 없다고 생각합니다. 이 기능은 꽤 우아하게 폴백(fallback)되기 때문입니다.
이 플러그인은 tailwind.config.js 파일에서 overscrollBehavior로 설정할 수 있습니다.
module.exports = { // ... // 플러그인 비활성화 corePlugins: { overscrollBehavior: false, }, // 활성화할 변형(variants) 커스터마이징 variants: { overscrollBehavior: ["responsive", "hover"], },};입력 파일 없이 CSS 생성하기
커스텀 CSS를 작성하지 않고 매번 이 파일을 만드는 것이 귀찮다면...
@tailwind base;@tailwind components;@tailwind utilities;...그렇다면 좋은 소식이 있습니다. tailwindcss CLI 도구를 사용한다면, 이 58자를 쓸데없는 CSS 파일에 낭비하는 대신 저축 계좌에 넣어둘 수 있습니다.
이제 CLI 도구에서 입력 파일 인자가 선택 사항이 되었습니다. 따라서 커스텀 CSS 파일이 실제로 필요하지 않다면, 이렇게 작성하면 됩니다:
npx tailwindcss build -o compiled.css여러분의 아이들은 함께 보낼 수 있는 추가 시간에 감사할 것입니다.
이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →