Heim  >  Fragen und Antworten  >  Hauptteil

Wie füge ich die CSS-Klasse Tailwind für die Tags <html> und <body> in Nuxt 3 hinzu?

<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>
P粉476883986P粉476883986385 Tage vor564

Antworte allen(1)Ich werde antworten

  • P粉754473468

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

    试试这个。

    useHead可组合文档中,有一个bodyAttrs参数。这应该可以帮助您在标签中添加任何自定义类。如果您想在HTML中添加一个类,可以使用htmlAttrs参数。 https://nuxt.com/docs/api/composables/use-head#usehead

    useHead({
      bodyAttrs: {
        class: 'your-body-class',
      },
    });

    Antwort
    0
  • StornierenAntwort