Nuxt 3 应用顺风 css 如何编辑主体元素？答案

【问题标题】：Nuxt 3 app with tailwind css how to edit the main body element?Nuxt 3 应用顺风 css 如何编辑主体元素？
【发布时间】：2022-01-29 00:00:24
【问题描述】：

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

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

我尝试将 Body 标签添加到我的主应用程序 VueJS 文件中，我在其中组合我的组件来构建页面。但这会导致 Main 应用程序 Div 中出现 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 类。

我的问题是这个放在哪里？或者我如何访问它。

【问题讨论】：

标签： vuejs3 tailwind-css nuxtjs3

【解决方案1】：

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

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

【讨论】：

useMeta 从今天起已弃用，请改用 useHead。