Wie füge ich die CSS-Klasse Tailwind für die Tags <html> und <body> in Nuxt 3 hinzu?
P粉476883986
2023-09-04 19:20:05
<p>Ich versuche, mithilfe von Tailwind eine benutzerdefinierte 404-Fehlerseite für meine Nuxt 3-Anwendung zu erstellen. </p>
<p>Ich möchte, dass die Seite den Bildschirm auf allen Geräten ausfüllt und die 404-Fehlerseite vertikal und horizontal zentriert wird, aber ich kann sie nicht vertikal zentrieren. Auch wenn „h-screen“ oder „h-full“ in einem umschlossenen <div> verwendet wird, befindet es sich immer oben auf der Seite. </p>
<p>In einem Beispiel in der Tailwind-UI-Komponente heißt es: „Dieses Beispiel erfordert eine Aktualisierung Ihrer Vorlage“: </p>
<pre class="brush:php;toolbar:false;"><html class="h-full">
<body class="h-full"></pre>
<p>Wie füge ich in Nuxt 3 ganz einfach die Tailwind-Klasse zu HTML- und Body-Tags in einer bestimmten page.vue hinzu? </p>
<p>Ich habe versucht, Folgendes zu page.vue hinzuzufügen: </p>
<pre class="brush:php;toolbar:false;"><script setup>
useHead({
htmlAttrs: {
Stil: 'html: h-full'
},
bodyAttrs: {
Stil: 'Körper: h-voll'
}
})
</script>
<Stil>
html,
Körper {
Rand: 0;
Polsterung: 0;
}
</style></pre></p>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
试试这个。
在
标签中添加任何自定义类。如果您想在HTML中添加一个类，可以使用useHead可组合文档中，有一个bodyAttrs参数。这应该可以帮助您在htmlAttrs参数。 https://nuxt.com/docs/api/composables/use-head#useheaduseHead({ bodyAttrs: { class: 'your-body-class', }, });