Tailwind CSS: tailwind.config.js로 커스텀 애니메이션 만들기 🎉

Tailwind CSS: tailwind.config.js로 커스텀 애니메이션 만들기 🎉

 

Tailwind CSS는 기본적으로 다양한 애니메이션을 지원하지만, 프로젝트에 맞춘 커스텀 애니메이션을 정의하면 훨씬 더 유연하게 애니메이션을 다룰 수 있어요. 이번 글에서는 tailwind.config.js에 커스텀 애니메이션을 추가하고, 이를 유틸리티 클래스로 사용하는 방법을 상세히 다뤄볼게요!

 

1. Tailwind CSS의 기본 애니메이션 구성 이해 📚

 

Tailwind CSS는 기본적으로 animation 유틸리티를 제공하며, 이를 통해 애니메이션을 쉽게 적용할 수 있습니다. 예를 들어:

 

<div class="animate-spin"></div>

 

하지만 프로젝트의 특성에 맞춘 애니메이션이 필요할 때는 tailwind.config.js를 활용해 커스텀 애니메이션을 추가해야 합니다.

 

2. 커스텀 애니메이션 추가: tailwind.config.js 설정 🛠️

 

2.1 애니메이션 키프레임 추가

 

먼저 @keyframes 정의를 tailwind.config.js 파일에 추가합니다.

 

// tailwind.config.js

module.exports = {

  theme: {

    extend: {

      // 커스텀 키프레임 정의

      keyframes: {

        wiggle: {

          '0%, 100%': { transform: 'rotate(-3deg)' },

          '50%': { transform: 'rotate(3deg)' },

        },

        fadeIn: {

          from: { opacity: 0 },

          to: { opacity: 1 },

        },

      },

      // 애니메이션 유틸리티 추가

      animation: {

        wiggle: 'wiggle 0.5s ease-in-out infinite',

        fadeIn: 'fadeIn 1s ease-in-out forwards',

      },

    },

  },

  plugins: [],

};

 

2.2 유틸리티 클래스 활용

 

이제 wiggle과 fadeIn 애니메이션을 HTML에서 사용할 수 있습니다.

 

<div class="animate-wiggle">흔들리는 텍스트!</div>

<div class="animate-fadeIn">부드럽게 나타나요!</div>

 

3. 커스텀 애니메이션 예제 ✨

 

3.1 버튼 강조 애니메이션

 

hover 시 버튼이 부드럽게 커졌다 작아지는 애니메이션을 정의해봅시다.

 

// tailwind.config.js

module.exports = {

  theme: {

    extend: {

      keyframes: {

        pulse: {

          '0%, 100%': { transform: 'scale(1)' },

          '50%': { transform: 'scale(1.1)' },

        },

      },

      animation: {

        pulse: 'pulse 0.8s ease-in-out infinite',

      },

    },

  },

  plugins: [],

};

 

HTML에서 사용하기:

 

<button class="bg-blue-500 text-white p-4 rounded-lg hover:animate-pulse">

  Hover Me!

</button>

 

3.2 카드 플립 애니메이션

 

hover 시 카드가 180도 뒤집히는 애니메이션을 추가해 봅시다.

 

// tailwind.config.js

module.exports = {

  theme: {

    extend: {

      keyframes: {

        flip: {

          from: { transform: 'rotateY(0deg)' },

          to: { transform: 'rotateY(180deg)' },

        },

      },

      animation: {

        flip: 'flip 0.6s ease-in-out forwards',

      },

    },

  },

  plugins: [],

};

 

HTML에서 사용하기:

 

<div class="relative w-64 h-64">

  <div class="absolute w-full h-full bg-blue-500 text-white flex items-center justify-center animate-flip hover:animate-none">

    앞면

  </div>

  <div class="absolute w-full h-full bg-gray-500 text-white flex items-center justify-center animate-none hover:animate-flip">

    뒷면

  </div>

</div>

 

4. Tailwind 플러그인 활용: 더 강력한 애니메이션 만들기 🚀

 

Tailwind CSS는 플러그인을 추가해 확장할 수도 있습니다. 예를 들어, tailwindcss-animate 같은 플러그인을 사용하면 다양한 애니메이션 효과를 바로 사용할 수 있어요.

 

설치 방법

 

npm install tailwindcss-animate

 

tailwind.config.js에 플러그인 추가:

 

module.exports = {

  plugins: [

    require('tailwindcss-animate'),

  ],

};

 

이제 다양한 프리셋 애니메이션을 활용할 수 있습니다. 예:

 

<div class="animate-bounce">이것도 Bounce!</div>

 

5. 커스텀 애니메이션 작성 팁 📝

1. 이름 직관성 유지: fadeIn, slideIn처럼 기능을 알 수 있는 이름으로 정의하세요.

2. 반복 가능 여부 설정: infinite를 활용해 반복 여부를 제어하세요.

3. Tailwind 변수 활용: colors, spacing 같은 Tailwind 테마 변수를 활용하면 유지보수가 쉬워집니다.

 

6. 마무리하며: Tailwind와 함께하는 애니메이션 마법 ✨

 

tailwind.config.js를 사용하면 프로젝트 특성에 맞는 애니메이션을 쉽게 정의할 수 있습니다. 커스텀 애니메이션은 사용자 경험(UX)을 높이고, 상호작용을 더 매끄럽게 만들어줍니다. 지금 바로 Tailwind 애니메이션을 활용해 웹사이트에 생기를 불어넣어 보세요!

 

🌷전설의 개발자가 되어봅시당!🌷