navの背景色が変化しない

Question

実現したいこと

navの背景色を白くしたい。

前提

webの勉強のためにサイトを作成しています。
navの背景色を変えようとしたところ、変わらず困っています。

発生している問題・エラーメッセージ

デベロッパーツールなどにエラーは出ていません。

該当のソースコード

<section class="hero relative">
  <nav class="fixed top-[0.5rem] left-[0.5rem] h-[4rem] z-10 bg-white">
    <div class="flex justify-between">
      <img
        class="fixed top-[0.5rem] left-[0.5rem] h-[4rem] w-auto"
        src="./images/logo.png"
        alt="logo"
      />
      <div>
        <ul class="fixed flex top-[1rem] right-[0.5rem] z-10">
          <a href="#"><li class="text-2xl me-[1.5rem]">Policy</li></a>
          <a href="#"><li class="text-2xl me-[1.5rem]">Services</li></a>
          <a href="#"><li class="text-2xl me-[1.5rem]">Contact</li></a>
          <a href="#"><li class="text-2xl me-[1.5rem]">Reserve</li></a>
        </ul>
      </div>
    </div>
  </nav>
  <div class="swiper-container z-0">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="slide-img">
          <img
            class="w-[100vw] h-[100vh] object-cover"
            src="./images/hero1.jpg"
            alt="diving"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img
            class="w-[100vw] h-[100vh] object-cover"
            src="./images/hero2.jpg"
            alt="diving"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img
            class="w-[100vw] h-[100vh] object-cover"
            src="./images/hero3.jpg"
            alt="diving"
          />
        </div>
      </div>
      <div class="swiper-slide">
        <div class="slide-img">
          <img
            class="w-[100vw] h-[100vh] object-cover"
            src="./images/hero4.jpg"
            alt="diving"
          />
        </div>
      </div>
    </div>
  </div>
</section>

試したこと

・CSSファイルにbackground: white;を指定してもダメでした。
・text-red-500にすると、文字の色は変わります。
・ulにbg-whiteにすると、ul部分だけは白くなります。
・npm run devは再起動してみました。
・キャッシュの削除してもダメでした。

補足情報（FW/ツールのバージョンなど）

ブラウザはchromeです。

Answer 1

navの中身がないため、widthが0になっているのでは。
right-0などとして幅を持たせればいいかもしれませんが、そもそも中身がない要素が必要なのかどうかを考えて直してみてもいいかもしれないですね。

Comments

[Lhankor_Mhy]

なお、tailwindはほとんど触ったことがないので、この書き方がお作法にかなうのかどうかはわからないです。

[goola]

w-[100vw]を追加したところ、背景が白くなりました。
勉強になりました。
感謝です。