简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Comment ajouter la classe CSS Tailwind pour les balises <html> et <body> dans Nuxt 3 ?
P粉476883986
P粉476883986 2023-09-04 19:20:05
0
1
613
<p>J'essaie de créer une page d'erreur 404 personnalisée en utilisant Tailwind pour mon application Nuxt 3. </p> <p>Je souhaite que la page remplisse l'écran sur tous les appareils et que la page d'erreur 404 soit centrée verticalement et horizontalement, mais je n'arrive pas à la centrer verticalement. Même lorsque vous utilisez h-screen ou h-full dans un <div> enveloppé, il est toujours en haut de la page. </p> <p>Dans un exemple du composant de l'interface utilisateur Tailwind, il est indiqué : "Cet exemple nécessite la mise à jour de votre modèle" : </p> <pre class="brush:php;toolbar:false;"><html class="h-full"> <body class="h-full"></pre> <p>Comment ajouter facilement une classe tailwind aux balises html et body dans une page.vue spécifique dans Nuxt 3 ? </p> <p>J'ai essayé d'ajouter ce qui suit à page.vue : </p> <pre class="brush:php;toolbar:false;"><configuration du script> utiliserTête({ htmlAttrs : { style : 'html: h-full' }, bodyAttrs : { style : 'corps : h-plein' } }) </script> <style> HTML, corps { marge : 0 ; remplissage : 0 ; } </style></pre></p>
P粉476883986
P粉476883986

répondre à tous(1)
P粉754473468
P粉7544734682023-09-05 10:44:01 1 plancher

Essayez ceci.

dans useHead可组合文档中，有一个bodyAttrs参数。这应该可以帮助您在

标签中添加任何自定义类。如果您想在HTML中添加一个类，可以使用htmlAttrs paramètres. https://nuxt.com/docs/api/composables/use-head#usehead 

useHead({
  bodyAttrs: {
    class: 'your-body-class',
  },
});
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！