문제 상황

Tailwind를 사용해 프로젝트를 진행하던 도중, 애니메이션 효과를 넣고싶었다.
그런데...공식 문서를 보니 애니메이션 종류가 꽤 한정적이다..!(v 3.1.7)
즉, 커스텀해서 사용해야한다는 것인데...어떻게 해야할까?

해결 방법

얼마전 포스트에서 Tailwind에 사용자 정의 색상 추가를 기록했었다.
같은 방법을 사용한다.
Tailwind를 사용하기 전 tailwind.config.js 파일을 생성할텐데, 여기에 사용자 정의 애니메이션을 생성할 것이다.

// tailwind.config.js

module.exports = {
  purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
  darkMode: false, // or 'media' or 'class'
  mode: "jit",
  theme: {
    extend: {
      keyframes: {
        intro: {
          from: { transform: "rotateY(0deg) scale(2.0)" },
          to: { transform: "rotateY(360deg) scale(1.0)" },
        },
      },
      animation: {
        intro: "intro 2s ease-in-out",
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

작성해야할 것은 keyframes와 animation으로 나뉜다.
keyframes에는 애니메이션의 이름과 효과를 넣어준다.
필자는 from, to를 사용했지만, 0%, 50%, 100%로 나눠서 작성하는 등 기존 keyframes 작성법에 맞춰 다양하게 작성 가능하다.
animation에는 keyframes에 생성한 애니메이션의 이름을 적어주고, css에서 animation 속성을 사용하는 것처럼 작성해준다.
이러면 준비는 끝! 사용만 하면 된다.

사용자 정의 애니메이션 사용하기

// src/pages/LeaguePages/LeagueTitle.tsx

// ... //

function LeagueTitle() {
  // ... //

  return (
    <header className="flex items-center mb-4">
      <img
        src={thisLeague?.league.logo}
        alt="league logo"
        className="w-[60px] mr-4 animate-intro"
      />
	  
      // ... //
    </header>
  );
}

export default LeagueTitle;

사용법은 일반적인 Tailwind 작성법과 동일하다.
공식문서에도 나와있지만 className에 animate라고 작성하여 animation 효과를 낸다.
필자는 intro라는 이름의 애니메이션을 만들어놨으므로, animate-intro라고 작성했다.

참고 문서

Tailwind 공식 문서