过渡 :class 顺风

Question

所以我希望这是一个相当简单的方法。我在 vue 文件中有一个 div

<div class="h-screen flex overflow-hidden" :class="darkMode">

我有一个脚本

export default {
  data() {
    return {
      darkMode: 'light'
    }
  },
  methods: {
    clickDarkMode () {
      if (this.darkMode === "dark") {
        this.darkMode = "light"
      } else {
        this.darkMode = "dark"
      }
    }
  },

当有人点击一个按钮从浅色变为深色或反之亦然时，我希望深色/浅色模式过渡，这样它就不会出现在你的脸上。我在 Tailwind Transitions 中理解，但无论我将实用程序类放在哪里，它们都不会激活。我做错了什么？