如何在Nuxt 3中為<html>和<body>標籤新增Tailwind CSS類別？
P粉476883986
2023-09-04 19:20:05
<p>我正在嘗試為我的Nuxt 3應用程式使用tailwind製作一個自訂的404錯誤頁面。 </p>
<p>我希望該頁面在所有設備上都能填滿螢幕，404錯誤頁面在垂直和水平方向上居中，但是我無法使其垂直居中。即使在包裝的<div>中使用h-screen或h-full，它始終位於頁面頂部。 </p>
<p>在Tailwind UI元件中的一個範例中，它說：「此範例需要更新您的範本」：</p>
<pre class="brush:php;toolbar:false;"><html class="h-full">
<body class="h-full"></pre>
<p>如何在Nuxt 3的特定page.vue中輕鬆新增tailwind類別到html和body標籤？ </p>
<p>我嘗試在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>
試試這個。
在
標籤中添加任何自訂類別。如果您想要在HTML中新增一個類，可以使用useHead可組合文件中，有一個bodyAttrs參數。這應該可以幫助您在htmlAttrs參數。 https://nuxt.com/docs/api/composables/use-head#useheaduseHead({ bodyAttrs: { class: 'your-body-class', }, });