How to add Tailwind CSS class for <html> and <body> tags in Nuxt 3?
<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>
