简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Nuxt 3 で <html> タグと <body> タグに Tailwind CSS クラスを追加するにはどうすればよいですか?
P粉476883986
P粉476883986 2023-09-04 19:20:05
0
1
561
<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粉476883986
P粉476883986

全員に返信(1)
P粉754473468
P粉7544734682023-09-05 10:44:01 1棟

＃＃＃これを試して。

useHead

コンポーザブル ドキュメントには、bodyAttrs パラメーターがあります。これは、 タグにカスタム クラスを追加するのに役立ちます。 HTML にクラスを追加する場合は、htmlAttrs

パラメーターを使用できます。 https://nuxt.com/docs/api/composables/use-head#usehead

リーリー

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！