ホームページ  >  に質問  >  本文

Nuxt 3 で <html> タグと <body> タグに Tailwind CSS クラスを追加するにはどうすればよいですか?

<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>
P粉476883986P粉476883986385日前563

全員に返信(1)返信します

  • P粉754473468

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

    ###これを試して。

    useHead

    コンポーザブル ドキュメントには、bodyAttrs パラメーターがあります。これは、 タグにカスタム クラスを追加するのに役立ちます。 HTML にクラスを追加する場合は、htmlAttrs パラメーターを使用できます。 https://nuxt.com/docs/api/composables/use-head#usehead

    リーリー

    返事
    0
  • キャンセル返事