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 の HTML タグと body タグに tailwind クラスを簡単に追加するにはどうすればよいですか? </p>
<p>page.vue に以下を追加してみました: </p>
<pre class="brush:php;toolbar:false;"><スクリプトのセットアップ>
useHead({
htmlAttrs: {
スタイル: 'html: h-full'
}、
bodyAttrs: {
スタイル: 'ボディ: h-full'
}
})
</スクリプト>
<スタイル>
html、
体 {
マージン: 0;
パディング: 0;
}
</style></pre></p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
＃＃＃これを試して。
useHeadコンポーザブル ドキュメントには、
パラメーターを使用できます。bodyAttrsパラメーターがあります。これは、タグにカスタム クラスを追加するのに役立ちます。 HTML にクラスを追加する場合は、htmlAttrshttps://nuxt.com/docs/api/composables/use-head#useheadリーリー