🏆 목표

<aside> 💡 현재 TailwindCSS를 이용해서 스타일을 하던 중 animation (hover: scale-1.1)을 따로 css 파일로 구분한 다음 스타일을 적용하는 식으로 유지 보수를 높이려고 하고 있음.

</aside>

📖 해결 방안

1. 해당 스타일을 정의할 파일을 만들어준다 ex) animation.css
2. 만든 파일을 globalcss.css에 불러와서 적용해준다.
3. usage에 적용해본다.
4. tailwindcss.config.ts에 plugins에 추가하여 자동완성이 되도록 만들어준다.

<aside> 🚫

주의사항

@apply의 경우에는 상태의존 클래스(hover, active)에 직접 적용할 수 없으니 이러한 부분에 유의해서 사용하자

</aside>

최종 예시)

// tailwindcss.config.ts
import type { Config } from "tailwindcss";

export default {
  ...
  plugins: [
    ({ addUtilities }) => {
      addUtilities(
        {
          ".custom-scale-auto": {
            transition: "transform 300ms",
          },
          ".custom-scale-auto:hover": {
            transform: "scale(1.1)", // hover 상태에서 scale 1.1
          },
          ".custom-scale-auto:active": {
            transform: "scale(0.95)", // active 상태에서 scale 0.95
          },
        },
        ["responsive", "hover", "active"] // responsive, hover, active 상태 지원
      );
    },
  ],
} satisfies Config;

// animation.css
@layer utilities {
  .custom-scale-auto {
    @apply transition-transform duration-300;
  }
  .custom-scale-auto:hover {
    @apply scale-110; /* hover 시 scale 1.1 */
  }
  .custom-scale-auto:active {
    transform: scale(0.95); /* active 시 scale 0.95 직접 정의 */
  }
}

// globalcss.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@import "../styles/animation.css";

...

🎙️ 시도