【tailwind】ふわっと背景色が切り替わるアニメーションを実装する

1080 ワード
tailwindcss tailwindcss テキストリンク

自分の実装力を上げるためスクラッチで、Vuetifyのカレンダーコンポーネントのようなものを作っています。
今日はtailwindcssを使って日付ラベルをhover時にふわっと背景色が切り替わるアニメーションを実装したので、備忘録を残しておきます。

<div :class="{ 'text-red-default' : isToday(day) }" class="text-center">
  <span class="rounded-full transition duration-500 ease-in-out cursor-pointer inline-block w-6 h-6 hover:bg-grey-light">
    {{ day.label }}
  </span>
</div>

classにtransition duration-500 ease-in-outを指定するとgifのようにふわっと背景色が切り替わるようになります。