tailwindcss animated

tailwindcss animated

공식웹사이트

프로젝트를 진행하면서 tailwindcss를 주력으로 사용하였다. tailwind v4로 업데이트가 되었지만 다양한 커스텀을 지원하지 않기 때문에 아직까지 애니메이션을 사용하기 위해서는 css를 정의해서 사용해야했다.

tailwind animation
아래는 tailwind에서 지원하는 애니메이션이다. 버튼등에 사용해면 매우 유용하다

start setting

사용하는 방법은 간단하며 tailwind v4 기준으로 github에 사용법이 친절하게 설명되어 있다.
tailwindcss animated github

필자는 pnpm을 패키지 매니저로 사용하였다.

pnpm add tailwindcss-animated

/* tailwind가 import된 css 파일 */
@import "tailwindcss";
@import "tailwindcss-animated";

아래는 이미지에 실제로 animation을 등록한 코드이다.
리액트와 ts를 사용했으며, className에 다른 tailwind class와 함께 추가하면 된다.

import BgImage from "../../assets/svgs/bgImage.svg";
import SdCara from "../../assets/svgs/sd_cara_1.svg";
export default function LandingPage() {
  return (
    <>
      <div
        className="w-lg min-w-lg mx-auto h-screen flex justify-center "
        style={{ backgroundImage: `url(${BgImage})` }}
      >
        <img src={SdCara} className=" w-1/2 animate-jump-in animate-ease-out" />
      </div>
    </>
  );
}

효과는 어디서 봐용?

여기서 봐용

적용될 효과를 미리보고, copy animation classes 버튼을 누르면 내가 선택한 애니메이션을 쉽게 코드에 적용할 수 있다

그래서 왜 써용?

tailwind에서 기본적으로 사용하는 애니메이션 보다 많은 기능을 지원하고, 방향, easing 등 다양한 요소를 커스텀할 수 있기 때문에 사용할 수 있다.

열심히 프로젝트를 준비해서 애니메이션 적용이된 예시를 공유할 수 있도록 하겠습니다.