Bagaimana untuk menambah kelas CSS Tailwind untuk tag <html> dan <body> dalam Nuxt 3?
P粉476883986
2023-09-04 19:20:05
<p>Saya cuba membuat halaman ralat 404 tersuai menggunakan tailwind untuk aplikasi Nuxt 3 saya. </p>
<p>Saya mahu halaman itu memenuhi skrin pada semua peranti dan halaman ralat 404 dipusatkan secara menegak dan mendatar, tetapi saya tidak boleh menjadikannya dipusatkan secara menegak. Walaupun semasa menggunakan skrin h atau h-penuh dalam <div> yang dibungkus, ia sentiasa berada di bahagian atas halaman. </p>
<p>Dalam satu contoh dalam komponen UI Tailwind, ia berkata: "Contoh ini memerlukan pengemaskinian templat anda": </p>
<pre class="brush:php;toolbar:false;"><html class="h-full">
<body class="h-full"></pre>
<p>Bagaimana untuk menambah kelas tailwind dengan mudah pada html dan teg badan dalam page.vue tertentu dalam Nuxt 3? </p>
<p>Saya cuba menambah yang berikut pada page.vue: </p>
<pre class="brush:php;toolbar:false;"><setup script>
useHead({
htmlAttrs: {
gaya: 'html: h-penuh'
},
bodyAtts: {
gaya: 'badan: h-penuh'
}
})
</skrip>
<gaya>
html,
badan {
margin: 0;
padding: 0;
}
</style></pre></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cuba ini.
dalam
标签中添加任何自定义类。如果您想在HTML中添加一个类，可以使用useHead可组合文档中，有一个bodyAttrs参数。这应该可以帮助您在htmlAttrsparameter. https://nuxt.com/docs/api/composables/use-head#useheaduseHead({ bodyAttrs: { class: 'your-body-class', }, });