Tailwind CSS v1.6.0

Tailwind CSS v1.6.0은 v1.5와 비슷하지만, 이제 애니메이션 지원과 overscroll 유틸리티 등이 추가되었습니다!

여기에는 주요 변경 사항이 없어야 하지만, 지난번에도 그렇게 생각했던 적이 있습니다. 만약 무언가를 깨뜨렸다면, 첫 번째로 보고해 주신 분께 Tailwind 티셔츠를 드리겠습니다.

​New Features

​애니메이션 지원

Tailwind CSS v1.6에서는 새로운 animation 코어 플러그인이 추가되었으며, 기본적으로 4가지 일반적인 애니메이션을 제공합니다:

• animate-spin
• animate-ping
• animate-pulse
• animate-bounce

<button type="button" class="bg-indigo-600 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." 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="... motion-safe:transition duration-150 ease-in-out ..."></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에서 지원되지 않지만, 이는 점진적 향상으로 간주해도 큰 문제가 되지 않는다고 생각합니다. 왜냐하면 이 기능은 꽤 우아하게 대체 동작을 제공하기 때문입니다.

이 플러그인은 tailwind.config.js 파일에서 overscrollBehavior로 설정할 수 있습니다.

module.exports = {
  // ...

  // 플러그인 비활성화
  corePlugins: {
    overscrollBehavior: false,
  },

  // 활성화할 변형(variants) 커스터마이징
  variants: {
    overscrollBehavior: ['responsive', 'hover'],
  },
}

​CSS 파일 없이 CSS 생성하기

만약 여러분이 커스텀 CSS를 작성하지 않고, 매번 이 파일을 만드는 것이 귀찮다면…

@tailwind base;
@tailwind components;
@tailwind utilities;

…그렇다면 좋은 소식이 있습니다. tailwindcss CLI 도구를 사용한다면, 이 58자를 쓸데없는 CSS 파일에 낭비하는 대신 저축 계좌에 넣어둘 수 있습니다.

이제 CLI 도구에서 입력 파일 인자가 선택 사항이 되었습니다. 따라서 커스텀 CSS 파일이 실제로 필요하지 않다면, 이렇게 작성하면 됩니다.

npx tailwindcss build -o compiled.css

여러분의 아이들은 여러분이 함께 보낼 수 있는 추가 시간에 감사할 것입니다.

이 글에 대해 이야기하고 싶으신가요? GitHub에서 토론하기 →