Maison  >  Questions et réponses  >  le corps du texte

Comment ajouter la classe CSS Tailwind pour les balises <html> et <body> dans Nuxt 3 ?

<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粉476883986P粉476883986385 Il y a quelques jours565

répondre à tous(1)je répondrai

  • P粉754473468

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

    Essayez ceci.

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

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

    répondre
    0
  • Annulerrépondre