Nuxt 3에서 <html> 및 <body> 태그에 Tailwind CSS 클래스를 추가하는 방법은 무엇입니까?
P粉476883986
2023-09-04 19:20:05
<p>Nuxt 3 애플리케이션에 tailwind를 사용하여 사용자 정의 404 오류 페이지를 만들려고 합니다. </p>
<p>페이지가 모든 기기의 화면을 채우고 404 오류 페이지가 세로 및 가로 중앙에 오도록 하고 싶지만 세로 중앙에 오도록 할 수 없습니다. 래핑된 <div>에서 h-screen 또는 h-full을 사용하는 경우에도 항상 페이지 상단에 있습니다. </p>
<p>Tailwind UI 구성요소의 한 예에서는 "이 예에서는 템플릿을 업데이트해야 합니다."라고 말합니다. </p>
<pre class="brush:php;toolbar:false;"><html class="h-full">
<body class="h-full"></pre>
<p>Nuxt 3의 특정 page.vue에 있는 html 및 body 태그에 tailwind 클래스를 쉽게 추가하는 방법은 무엇입니까? </p>
<p>page.vue에 다음을 추가해 보았습니다. </p>
<pre class="brush:php;toolbar:false;"><스크립트 설정>
useHead({
HTML 속성: {
스타일: 'html: h-full'
},
신체 속성: {
스타일: '본문: h-full'
}
})
</스크립트>
<스타일>
HTML,
몸 {
여백: 0;
패딩: 0;
}
</style></pre></p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이것을 시도해 보세요.
标签中添加任何自定义类。如果您想在HTML中添加一个类，可以使用useHead可组合文档中，有一个bodyAttrs参数。这应该可以帮助您在htmlAttrs매개변수. https://nuxt.com/docs/api/composables/use-head#usehead