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.
If you're using nuxt v3, you can add this to your setup method.
export default {
setup () {
useMeta({
bodyAttrs: {
class: 'dark:some-tailwind-class...'
}
})
}
}