How to add Tailwind CSS class for <html> and <body> tags in Nuxt 3?
P粉476883986
2023-09-04 19:20:05
<p>I'm trying to make a custom 404 error page using tailwind for my Nuxt 3 application. </p>
<p>I want the page to fill the screen on all devices and the 404 error page to be centered vertically and horizontally, but I can't get it to be centered vertically. Even when using h-screen or h-full in a wrapped <div>, it is always at the top of the page. </p>
<p>In one example in the Tailwind UI component, it says: "This example requires updating your template": </p>
<pre class="brush:php;toolbar:false;"><html class="h-full">
<body class="h-full"></pre>
<p>How to easily add tailwind class to html and body tags in specific page.vue in Nuxt 3? </p>
<p>I tried adding the following to page.vue: </p>
<pre class="brush:php;toolbar:false;"><script setup>
useHead({
htmlAttrs: {
style: 'html: h-full'
},
bodyAttrs: {
style: 'body: h-full'
}
})
</script>
<style>
html,
body {
margin: 0;
padding: 0;
}
</style></pre></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Try this.
In the
tag. If you want to add a class to HTML, you can use theuseHeadcomposable document, there is abodyAttrsparameter. This should help you add any custom classes in thehtmlAttrsparameter. https://nuxt.com/docs/api/composables/use-head#useheaduseHead({ bodyAttrs: { class: 'your-body-class', }, });