vuejs3tailwind-cssnuxt3.js

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


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.


Solution

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

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