Nuxt 3 app with tailwind css 如何编辑主 body 元素？

Question

我正在 NuxtJS 和 Tailwindcss 的帮助下学习 VueJS，用于一个业余项目。由于 tailwindcss 使得暗模式编辑变得非常容易，我运行遇到了 safari 浏览器上的问题。

每当您在黑暗模式下向下或向上滚动或拖动浏览器时，您总是会看到白色背景。这是 body，我无法更改它。

我尝试的是将 Body 标记添加到我的主应用程序 VueJS 文件中，我在其中组合我的组件来构建页面。但这会导致主应用程序 Div 中出现 Body 标记。那意味着我有两个 body 标签，像这样

<body> -> Main body from the Nuxt app
<Div> -> div to wrap components in
<body> -> Body that i added in the main Vue app file (its double)
</body>
</div>
</body>

如果我查看 Tailwind 网站并检查该网站，我发现该网站在其主要 Body 元素上使用了 Tailwindcss 类。

我的问题是这个放在哪里？或者我怎样才能访问它。

Answer 1

如果您使用的是 nuxt v3，您可以将其添加到您的 setup 方法中。

export default {
  setup () {
    useMeta({
      bodyAttrs: {
        class: 'dark:some-tailwind-class...'
      }
    })
  }
}

Nuxt 3 app with tailwind css 如何编辑主 body 元素？

Nuxt 3 app with tailwind css how to edit the main body element?

tailwind-css

vuejs3

nuxtjs3