如何在 Vue 3 中使用白色页眉向 TailWind UI Dark Navy 添加背景颜色

Question

我正在尝试修改 TailwindUI/Vue (https://tailwindui.com/preview#component-10058606cac5398d7fa2c73b64089874) 中的带有白色页眉的深色导航模板。我想为模板添加背景颜色。为此，我尝试将 class="bg-amber-300" 添加到 top-level div:

  <div class="bg-amber-300 min-h-full">
     ///
  </div>

...但这没有用。我还尝试在模板中进一步向主要标签添加颜色 class：

    <main class="bg-amber-300">
      <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <!-- Replace with your content -->
        <div class="px-4 py-6 sm:px-0">
          <div class="border-4 border-dashed border-gray-200 rounded-lg h-96" />
        </div>
        <!-- /End replace -->
      </div>
    </main>

但这也没有用。在这两种情况下，视图底部仍然存在较大的白色间隙。如何添加背景颜色，以便填充导航栏下方的整个视图？

Answer 1

我认为它可以正常工作，因为 min-h-full 表示采用内容部分中指定的全高 h-96 如果你想摆脱白色 space 给 top-level div 这个 class min-h-screen bg-amber-300

https://play.tailwindcss.com/fGw3zeIf4n

如何在 Vue 3 中使用白色页眉向 TailWind UI Dark Navy 添加背景颜色

How to add background color to TailWindUI Dark Nav with White Page Header in Vue 3

vue.js

vuejs3

tailwind-css

tailwind-ui

tailwind-3