要实现深色模式切换，首先需要在 nuxt.config.js 文件中配置 Tailwind CSS。然后，在需要切换深色模式的地方，通过 `theme` 属性来设置不同的主题。

1. 安装 Tailwind CSS：

npm install tailwindcss

2. 在 nuxt.config.js 文件中配置 Tailwind CSS：

module.exports = {

  // ...

  theme: {

    extend: {},

  },

  // ...

}

3. 在需要切换深色模式的地方，使用 `theme` 属性来设置不同的主题。例如，在 `` 标签中：

  

    Hello World

  

4. 在 `` 标签中引入 Tailwind CSS：

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

5. 在需要切换深色模式的地方，通过 `theme` 属性来设置不同的主题。例如，在 `` 标签中：

export default {

  data() {

    return {

      darkMode: false,

    };

  },

  methods: {

    switchDarkMode() {

      this.darkMode = !this.darkMode;

    },

  },

};

6. 在需要切换深色模式的地方，调用 `switchDarkMode` 方法来切换深色模式。例如，在 `` 标签中：

  export default {

    data() {

      return {

        darkMode: false,

      };

    },

    methods: {

      switchDarkMode() {

        this.darkMode = !this.darkMode;

      },

    },

  };

这样，当页面加载时，会默认显示浅色模式。通过调用 `switchDarkMode` 方法，可以切换到深色模式。Nuxt3+Tailwindcss 实现深色模式切换