如何在Nuxt 3特定page.vue中为html、body标签添加Tailwind CSS类？

问题根源 #

你之前用useHead的写法有误，htmlAttrs和bodyAttrs里应该用class属性而非style，且类名直接写h-full即可，不需要加html:或body:前缀。

正确实现步骤 #

1. 修正404页面的useHead配置
   替换你原来的<script setup>代码，改成下面的正确写法：

   <script setup>
   useHead({
     htmlAttrs: {
       class: 'h-full'
     },
     bodyAttrs: {
       class: 'h-full'
     }
   })
   </script>
   

2. 设置页面容器的居中布局
   在页面根容器上使用flex布局结合全屏高度属性，确保内容垂直水平居中：

   <template>
     <div class="min-h-screen flex items-center justify-center bg-gray-100">
       <div class="text-center">
         <h1 class="text-9xl font-bold text-gray-400">404</h1>
         <p class="text-2xl text-gray-600 mt-4">页面不存在</p>
       </div>
     </div>
   </template>
   

3. 可选：全局样式重置
   若要消除默认边距干扰，可保留或调整样式代码：

   <style>
   html, body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   </style>
   

补充说明 #

• 用min-h-screen代替h-full，能确保容器在内容不足时也占满屏幕高度，避免居中失效。
• 上述useHead配置仅作用于当前404页面，不会影响其他页面的html/body属性。

内容的提问来源于stack exchange，提问作者Steve