国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Community

Learn

Tools Library

AI Tools

Leisure

English

How to add Tailwind CSS class for <html> and <body> tags in Nuxt 3?

P粉476883986 2023-09-04 19:20:05

993

<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>

P粉476883986

reply all(1)

P粉7544734682023-09-05 10:44:01 1 floor

Try this.

In the useHead composable document, there is a bodyAttrs parameter. This should help you add any custom classes in the

tag. If you want to add a class to HTML, you can use the htmlAttrs parameter. https://nuxt.com/docs/api/composables/use-head#usehead

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

Like +0

Add Reply