Tailwind CSS V4 animation Keyframes 정의하기

tailwindCSS V4에서는 tailwind.config.js 가 아니라 app.css 파일,

 

@import tailwindcss

 

가 포함되어 있는 파일에서 animation keyframes 를 정의한다.

 

- V3

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      animation: {
        'spin-slow': 'spin 3s linear infinite',
      }
    }
  }
}

 

 

- V4

// app.css

@import "tailwindcss";

@theme {
  --animate-fade-in-scale: fade-in-scale 0.3s ease-out;
  @keyframes fade-in-scale {
    0% {
      opacity: 0;
      transform: scale(0.95);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }
}