[TIL] Tailwind CSS Animate

TailwindCSS를 앞에서 사용방법을 알고 공식문서를 보며 직접 구현을 해보았는데, 이게 무슨일이지.. animate는 커스텀 필수인데 어떻게하는건지 공식문서를 봐도 잘 모르겠어서 이건.. 정리해 놓지 않으면 다음에 또 검색해서 찾아보겠다라는 생각이 들어서 애니메이션 커스텀 사용 방법을 정리해요ㅎㅎ

tailwind.config.js(ts)의 theme.extend에 keyframe 추가

const config: Config = {
  // ...
  theme: {
    extend: {
      keyframes: {
        fadeIn: { "100%": { transform: "translateY(0)", opacity: "1" } },
      },
    },
  },
};

theme.extend에 animation 추가

animation: {
        actHeaderFadeIn: "fadeIn .6s ease 1s forwards",
        actFooterFadeIn: "fadeIn .6s ease 1.4s forwards",
      },

애니메이션 효과 class 적용

<div className="animate-actFooterFadeIn">나와랏</div>

animation을 선언하지 않아도 keyframe을 직접 사용

<div className="animate-[fadeIn .6s ease 1s forwards]">나와랏</div>

TailwindCSS 공식문서에 잘 보면 적용하기 쉽겠지만.. 저처럼 봐도 헤매는 사람1인으로서 글을 남겨요ㅎㅎ