페이지가 전체 화면이 아닐 때 설명할 수 없는 오른쪽 여백 - Nuxt/Tailwinds

Question

<p>Nuxt, Vue3 및 TailwindCSS를 사용하여 간단한 이력서 페이지를 만들려고 합니다. 브라우저가 전체 화면이면 모든 것이 괜찮아 보이고 모든 것이 잘 작동합니다. 그런데 전체 화면이 아닌 다른 부분이 보이면 앱 메인 부분의 페이지 오른쪽이 아무 이유 없이 비어 있습니다. (끔찍한 디자인은 무시하세요. 아직 작업 중입니다.)</p> <p>아래에서 볼 수 있듯이 요소의 오른쪽에 여백이 있지만 없어야 하며 계산된 레이아웃에도 표시되지 않습니다. 저는 맞춤 CSS를 추가하지 않았기 때문에 기본 Tailwind에서 제공하는 클래스를 사용했습니다. 제가 아는 한 이 클래스에는 적절한 여백이 없어야 합니다. </p> <p>이것은 상위 요소이며, 보시다시피 하위 요소에 영향을 주는 여백이나 여백이 없습니다. </p> <p>이것은 "content" 요소가 삽입된 내 <code>default.vue</code>입니다(<code><slot /></code> 태그에)</ p> <pre class="brush:html;toolbar:false;"> <템플릿> <div class="컨테이너 플렉스 p-4 flex-col h-screen Overflow-hidden bg-slate-200"> <div class="pb-2 bg-gradient-to-r에서-red-500을 통해-green-500에서-purple-500으로"> <헤더 클래스="bg-slate-200 pb-2"> <탐색> <ul class="flex justify-end gap-5"> <NuxtLink to="skills" class="rounded-lg border-black border-solid border-2 p-3"> <li>주요 기술 및 관심분야 </li> </NuxtLink> <NuxtLink to="education" class="rounded-lg border-black border-solid; border-2 p-3">

교육

</NuxtLink> <NuxtLink to="experience" class="둥근-lg 테두리-검정색 테두리-단색 border-2 p-3"> <li>경험</li> </NuxtLink> <NuxtLink to="about" class="rounded-lg border-black border-solid border-2 p-3"> <li>나에 대한 간략한 소개</li> </NuxtLink> </ul> </nav> </헤더> </div> <슬롯 /> </div> </템플릿>

Answer 1

Tailwind의 컨테이너 클래스는 수평 패딩이나 자체 중심 맞춤을 자동으로 적용하지 않습니다. 첫 번째 div에 mx-auto 클래스(margin-left 및 margin-right를 자동으로 설정)를 추가하면 문제가 해결됩니다.