Comment ajouter la classe CSS Tailwind pour les balises <html> et <body> dans Nuxt 3 ?
P粉476883986
2023-09-04 19:20:05
<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>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Essayez ceci.
dans
标签中添加任何自定义类。如果您想在HTML中添加一个类，可以使用useHead可组合文档中，有一个bodyAttrs参数。这应该可以帮助您在htmlAttrsparamètres. https://nuxt.com/docs/api/composables/use-head#useheaduseHead({ bodyAttrs: { class: 'your-body-class', }, });