페이지가 전체 화면이 아닐 때 설명할 수 없는 오른쪽 여백 - Nuxt/Tailwinds
<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>
</템플릿>
