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

user_11811582 0
Viewed 658

I am learning VueJS with the help of NuxtJS and Tailwindcss for a hobby project. Since tailwindcss makes it really easy to edit for darkmode i ran in to a problem on the safari browser.

Whenever you scroll or drag the browser in darkmode down or up, you always see a white background. This is the body and i cannot change it.

What i have tried is to add Body tag in to my main app VueJS file where i combine my components to build the page. But this results in a Body tag inside the Main app Div. That would mean that i have two body tags like this

<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>

If i look at the website of tailwind and inspect the website i see that there website uses the Tailwindcss classes on they main Body element.

My question is where is this placed? or how can i access it.

nuxtjs3 vuejs3 tailwind-css
1 Answers

If you're using nuxt v3, you can add this to your setup method.

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