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

Question

I am attempting to modify the Dark Nav with White Page Header template in TailwindUI/Vue (https://tailwindui.com/preview#component-10058606cac5398d7fa2c73b64089874). I wish to add a background color to the template. To do this, I attempted to add class="bg-amber-300" to the top-level div:

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

...but that did not work. I also tried adding a color class to the main tags further down in the template:

    <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>

But that also did not work. In both cases there is still a large white gap at the bottom of the view. How can I add background color so that the entire view below the nav bar is filled?

Answer 1

I think it's working as it should because min-h-full means to take the full height which is specified in the content section as h-96 if you want to get rid of the white space give the top-level div this class min-h-screen bg-amber-300

https://play.tailwindcss.com/fGw3zeIf4n