tailwind css에서
className에 브라켓이 씌워져있으면 자동완성이 되지 않는다..

tailwind

사용자 정의 keyframes와 animation을 등록하기 위해서는
tailwind.config.js의 theme - extend 에 정의해야 한다

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {
      keyframes: {
        move: {
          "0%": {
            transform: "translate(-50% ,-70%)",
          },
          "100%": {
            transform: "translate(-50%, 0)",
          },
        },
        view: {
          "0%": {
            opacity: "0",
          },
          "30%": {
            opacity: "1",
          },
          "90%": {
            opacity: "1",
          },
          "100%": {
            opacity: "0",
          },
        },
      },
      animation: {
        snack: "move 0.5s ease-in-out, view 2s ease-in-out",
      },
    },
  },
  plugins: [],
};

animation에 여러개의 keyframes를 등록하려면 문자열 내에 콤마로 구분하여 등록

// SnackBar.tsx

const Snackbar = () => {
  return (
    <span
      className="py-[14px] px-[24px] bg-[#dddddd] fixed top-[2%] 
    left-[50%] translate-x-[-50%] rounded animate-snack opacity-0"
    >
      hi
    </span>
  );
};

export default Snackbar;