keyframe, animation 정의

animation 효과를 줄려면 css 파일에서 keyframe을 만들고 애니메이션을 적용해야 합니다. 그런데 이러면 Tailwind CSS 문법처럼 쓰지 못합니다. 따로 파일을 만들어서 import를 해야하죠.

tailwind.config.ts 파일을 이용하여 간단하게 구현할 수 있습니다. 여기에서 animation을 세팅할 수 있습니다. 이 파일은 프로젝트 폴더 생성 시 자동으로 생성됩니다.

npx tailwindcss init

이 명령어를 수행해서 파일을 생성시켜도 됩니다.

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
	content: [
		//...
		"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
	],
	theme: {
		extend: {
			//...
			keyframes: {
				"fade-in-kf": {
					from: {
						opacity: "0%"
					},
					to: {
						opacity: "100%"
					}
				}
			},
			animation: {
				"fade-in-animation": "fade-in-kf 1s linear forwards",
			},
		}
	},
	plugins: [],
} satisfies Config;

투명도 0%에서 100%로 변하는 키프레임 fade-in-kf를 만들었습니다. 그리고 이 키프레임을 이용해서 1초간 linear 방식으로 변하는 애니메이션 fade-in-animation을 정의합니다.

그 다음 컴포넌트의 className에 적용해줍니다.

<div className="animate-fade-in-animation"> ... </div>

이렇게 Tailwind CSS 문법으로 쓸 수 있게 됩니다.

투명도가 변하는 애니메이션이 적용된 모습

투명도뿐만이 아니라 transform, color 등등 다양하게 설정할 수 있습니다.

---

tailwind.config 파일이 없어요!

next.js 15.2.x버전부터 Tailwind CSS V4를 쓰는 것 같습니다. 이 버전의 'Tailwind CSS'에서는 더이상 config 파일을 쓰지 않는다고 하네요. 이제 css 파일에서 직접 설정을 한다고 합니다. 디자인 시스템을 더 간결하고 효율적으로 구성하기 위함이라고 하네요.

app/globals.css

@keyframes fade-in-kf {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

@theme {
  --animate-fade-in: fade-in-kf 1s linear forwards;
}

.animate-fade-in {
  animation: (--animate-fade-in);
}

@theme에서 사용자 정의가 이루어지는 방식입니다.

이렇게 정의한 후 className에 animate-fade-in을 써주면 위에서 봤던 이미지와 동일하게 작동합니다.