css - TailwindCSS 暗模式莫名其妙的行为

Question

我在使用 NextJS 的项目中使用 TailwindCSS 已经有一段时间了。我按照官方文档以及我可以在网上找到的文章添加了暗模式。我还添加了一个切换按钮来从浅色模式切换到深色模式。启用后，只有一个标签有效。在这种情况下，这个：

const Background = () => {
  return (
    <div className="md:absolute inset-0 ">
      <div className="bg-gradient-to-b dark:from-black from-white to-gold-200 md:min-h-screen" />
    </div>
  );
};

export { Background };

任何其他尝试都不起作用。例如，我想在这个背景上使用浅色文本：

<nav className="f-f-l relative z-10">
  <div className="relative z-10 mx-auto container hidden w-full px-4 xl:px-0 lg:flex justify-between items-center py-11">
    <div>
      <img
        src={`${router.basePath}/pathtoimage`}
        width={300}
        alt="alt image"
      />
    </div>
    <div className="flex items-center text-lg font-bold text-gray-900  dark:text-white">
      <ul className="flex items-center pr-3 xl:pr-12 ">
        <li className="cursor-pointer hover:underline">
          <Link href="/">
            <a>Link1</a>
          </Link>
        </li>
        <li className="pl-3 lg:pl-5 xl:pl-8 cursor-pointer hover:underline">
          <a>Link2</a>
        </li>
        <li className="pl-3 lg:pl-5 xl:pl-8 cursor-pointer hover:underline">
          <a>Link3</a>
        </li>
        <li className="pl-3 lg:pl-5 xl:pl-8 cursor-pointer hover:underline">
          <ModalClass />
        </li>
      </ul>
      <DarkModeToggle />
    </div>
  </div>
</nav>

我究竟做错了什么？暗模式非常适用于背景类，但不适用于这个或任何其他标签或类。

标签： cssreactjstypescriptnext.jstailwind-css