操作方法：使用 TailwindCSS + Vue3 + Vite 切换深色模式-PHP中文网问答

我是 Vite/Vue3 的初学者，目前我面临一个问题，我需要社区的综合知识。

我创建了一个 Vite/Vue3 应用程序并安装了 TailwindCSS：

npm create vite@latest my-vite-vue-app -- --template vue
cd my-vite-vue-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后我按照 Tailwind 主页上的说明进行操作：

在 tailwind.config.js 文件中添加所有模板文件的路径。
将新创建的 ./src/index.css 文件导入到 ./src/main.js 文件中。
创建一个 ./src/index.css 文件并为每个文件添加 @tailwind 指令Tailwind 的图层。

现在我有一个正在运行的 Vite/Vue3/TailwindCSS 应用程序，并且想要添加切换暗模式的功能。

Tailwind 文档表示，可以通过将 darkMode: 'class' 添加到 tailwind.config.js 来存档，然后将类 dark 切换为标记。

我使用以下代码完成了这项工作：


  (...)

是的，我知道这不是 Vue3 风格的代码。而且，是的，我知道可以使用 element.classList.toggle() 而不是 .remove() 和 .add() 。但也许像我这样的其他初学者将来会看到这一点，并且会感激一些简单的代码开始。所以请大家怜悯……

现在我终于要问社区的问题了：

我知道像这样操作 DOM 不是 Vue 的做事方式。当然，我想以正确的方式实现我的目标。 但是我该怎么做呢？

相信我，我在 google 上搜索了好几个小时，但没有找到一个无需安装这个和这个以及这个额外 npm 模块即可工作的解决方案。

但我想要一种极简主义的方法。尽可能少的依赖，以免让我和其他想要开始学习的人不知所措。

以此为背景 - 你们有适合我和其他新手的解决方案吗？ :-)

This is an about page