Tailwind CSS 애니메이션 라이브러리의 함정 — tw-animate-css 15KB 줄이기

// globals.css — 한 줄이 15KB를 추가한다
@import "tw-animate-css";

// 실제로 프로젝트에서 사용하는 클래스
// animate-fade-in        → 3곳
// animate-slide-in-up    → 2곳
// animate-fade-out       → 1곳
// 나머지 50+ 유틸리티    → 0곳

/* tw-animate-css 내부 — fadeIn 하나의 정의 */
@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@utility animate-fade-in {
  animation: fade-in var(--tw-animate-duration, 0.3s)
    var(--tw-animate-easing, ease)
    var(--tw-animate-delay, 0)
    var(--tw-animate-iteration, 1)
    var(--tw-animate-fill, both);
}

/* + slideIn, slideOut, bounce, shake, spin,
   wiggle, pulse, ping, zoom... 등 50개 이상 */

# 프로젝트에서 animate- 클래스 사용 현황 검색
grep -r "animate-" --include="*.tsx" --include="*.ts" \
  -oh | sort | uniq -c | sort -rn

# 실행 결과 예시:
#  12 animate-pulse     ← Tailwind 기본 내장
#   6 animate-fade-in   ← tw-animate-css
#   3 animate-slide-in-up
#   1 animate-fade-out
#   ... (나머지는 0회)

/* globals.css — Before */
@import "tw-animate-css";  /* 15KB 전체 */

/* globals.css — After: 필요한 것만 */
/* @import "tw-animate-css";  ← 제거 */

/* fadeIn — 실제 사용 3곳 */
@keyframes fade-in {
  from { opacity: 0; }
}
@utility animate-fade-in {
  animation: fade-in 0.3s ease both;
}

/* slideInUp — 실제 사용 2곳 */
@keyframes slide-in-up {
  from { transform: translateY(20px); opacity: 0; }
}
@utility animate-slide-in-up {
  animation: slide-in-up 0.4s ease both;
}

/* fadeOut — 실제 사용 1곳 */
@keyframes fade-out {
  to { opacity: 0; }
}
@utility animate-fade-out {
  animation: fade-out 0.3s ease both;
}

/* Tailwind v4 — 커스텀 유틸리티 정의 */

/* duration, delay 제어용 커스텀 프로퍼티 */
@property --tw-animate-duration {
  syntax: "<time>";
  inherits: false;
  initial-value: 0.3s;
}

@property --tw-animate-delay {
  syntax: "<time>";
  inherits: false;
  initial-value: 0s;
}

/* 이렇게 쓸 수 있음 */
/* <div className="animate-fade-in [--tw-animate-duration:0.5s]"> */