CODEWITHSUNDEEP
vuejs3tailwind-cssnuxt3.js
Inb4cookies
Inb4cookies

Reputation: 345

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.

Upvotes: 8

Views: 12018

Answers (4)

Paul
Paul

Reputation: 45

If you want to set the id of your body globally, your nuxt.config.ts should look something like this.

export default defineNuxtConfig({
  app: {
    head: {
      bodyAttrs: {
        id: 'your-body-id',  // Replace with your desired ID
      }
    }
  }
})

Upvotes: 0

gnegis
gnegis

Reputation: 141

As of nuxt 3.8.1, useMeta is deprecated. Here is how I managed:

In pages/index.vue (could be done in app.vue; this project needed separate classes, modes etc. And I use nuxt/color-mode package):

const colorMode = useColorMode();

useHead({
  bodyAttrs: {
    class: [
      isScrolled.value ? "" : "banner-in-viewport",
      colorMode.value === "dark" ? "theme-dark" : "theme-light",
    ].join(" "),
  },
});

Upvotes: 4

Ostap Brehin
Ostap Brehin

Reputation: 3957

If you wish to apply this change globally, inside .nuxt.config.ts you can add:

export default defineNuxtConfig({
  //.. other fields
  app: {
    head: {
      bodyAttrs: {
        class: 'bg-gray-100',
      },
    },
  },
})

https://nuxt.com/docs/getting-started/seo-meta

Upvotes: 11

Nick Dawes
Nick Dawes

Reputation: 2244

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

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

Upvotes: 8

Related Questions