Search code examples
vue.jsnuxt.jstailwind-cssnuxt3.jstailwind-ui

How do you add Tailwind CSS classes to the <html> and <body> tags in Nuxt 3?

I am trying to make a custom 404 error page for my Nuxt 3 app using tailwind.

I'd like the page to fill the screen on all devices with the 404 centred vertically and horizontally, but I can't get it to be centred vertically. It is always at the top of the page even when I use h-screen or h-full in a wrapping <div>.

In an example in of such page in Tailwind UI components, it says the "this example requires updating your template":

    <html class="h-full">
    <body class="h-full">

How do I easily add tailwind classes to html and body tags for a specific page.vue in Nuxt 3?

I have tried adding the following in the page.vue:

<script setup>
useHead({
  htmlAttrs: {
    style: 'html: h-full'
  },
  bodyAttrs: {
    style: 'body: h-full'
  }
})
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
}
</style>
Solution

  • Try this.

    On the useHead composable documentation. There is a bodyAttrs parameter. That should help you add any custom classes in the body tag. If you want to add a class on the HTML, you can use the htmlAttrs parameter. https://nuxt.com/docs/api/composables/use-head#usehead

    useHead({
  bodyAttrs: {
    class: 'your-body-class',
  },
});

    Here is a working example. Hope that helps you https://stackblitz.com/edit/nuxt-starter-ts3sbx?file=pages%2Findex.vue