NextJS+Tailwind客户端组件按钮点击后颜色不更新问题求助

我在Next.js客户端组件中尝试根据URL条件用Tailwind高亮按钮，但按钮颜色无法正常显示。查看Safari和Chrome开发者工具时，页面HTML已更新，但视觉上颜色没有变化。将Tailwind颜色类名从bg-blue-100改为bg-blue-200时问题会消失，改回原颜色后问题又重现。我怀疑这和React更新浏览器的时机有关，但找不到解决办法。

尝试1：用状态结合枚举判断当前页面 #

Navbar组件代码 #

'use client'

import { useState } from "react";
import NavButton from "./navbutton";

enum Page {
    Dashboard=0,
    Shelves
};

export default function Navbar()
{
    const [currentPage, setCurrentPage] = useState(Page.Dashboard);

    const navButtons = [
        { page: "/dashboard", image: "home.svg", pageID: Page.Dashboard},
        { page: "/dashboard/shelves", image: "grid.svg", pageID: Page.Shelves}
    ];

    return(
        <div className="sticky top-0 h-dvh w-[3rem] flex flex-col justify-center items-center p-0 bg-white text-black drop-shadow-xl">
            {navButtons.map((navButton) =>
                <NavButton 
                    key={navButton.pageID}
                    page={navButton.page}
                    image={navButton.image}
                    clickHandler={(e: React.MouseEvent) => (setCurrentPage(navButton.pageID))}
                    styles={currentPage==navButton.pageID ? "bg-blue-100" : ""}
                />
            )}
        </div>
    );
}

NavButton组件代码 #

import Link from "next/link";
import Image from "next/image";

export default function NavButton({ page, image, clickHandler, styles="" } : 
    { page: string, image: string, clickHandler: (e: React.MouseEvent) => void, styles?: string })
{
    return(
        <Link href={page} className="w-[100%]">
            <button onClick={clickHandler} className={`h-[3rem] w-[100%] flex justify-center items-center bg-white text-black ${styles}`}>
                <Image 
                    src={`../../${image}`}
                    width={30}
                    height={30}
                    alt="Image not found"
                />
            </button>
        </Link>
    );
}

结果：初始渲染无效，修改颜色类名后生效，改回原颜色则失效。

尝试2：使用Next.js的usePathname钩子 #

Navbar组件代码 #

'use client'

import { useState } from "react";
import NavButton from "./navbutton";

export default function Navbar()
{
    const navButtons = [
        { page: "/dashboard", image: "home.svg"},
        { page: "/dashboard/shelves", image: "grid.svg"}
    ];

    return(
        <div className="sticky top-0 h-dvh w-[3rem] flex flex-col justify-center items-center p-0 bg-white text-black drop-shadow-xl">
            {navButtons.map((navButton) =>
                <NavButton 
                    key={navButton.page}
                    page={navButton.page}
                    image={navButton.image}
                />
            )}
        </div>
    );
}

NavButton组件代码 #

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";

export default function NavButton({ page, image } : 
    { page: string, image: string, })
{
    const pathname = usePathname();

    return(
        <Link href={page} className="w-[100%]">
            <button className={`h-[3rem] w-[100%] flex justify-center items-center bg-white text-black ${pathname === page ?  "bg-blue-200" : ""}`}>
                <Image 
                    src={`../../${image}`}
                    width={30}
                    height={30}
                    alt="Image not found"
                />
            </button>
        </Link>
    );
}

结果：和尝试1表现完全一致，仅修改颜色类名时生效。

尝试3：将按钮内联而非拆分组件 #

结果：问题依旧。

尝试4：创建currentPage状态并传递事件处理函数 #

Navbar组件代码 #

'use client'

import { useState } from "react";
import NavButton from "./navbutton";
import { usePathname } from "next/navigation";

export default function Navbar()
{
    const navButtons = [
        { page: "/dashboard", image: "home.svg"},
        { page: "/dashboard/shelves", image: "grid.svg"}
    ];

    const pathname = usePathname();
    const [currentPage, setCurrentPage] = useState(pathname);

    return(
        <div className="sticky top-0 h-dvh w-[3rem] flex flex-col justify-center items-center p-0 bg-white text-black drop-shadow-xl">
            {navButtons.map((navButton) =>
                <NavButton 
                    key={navButton.page}
                    page={navButton.page}
                    image={navButton.image}
                    currentPage={currentPage}
                    onClick={() => {setCurrentPage(navButton.page)}}
                />
            )}
        </div>
    );
}

NavButton组件代码 #

import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";

export default function NavButton({ page, image, currentPage, onClick } : 
    { page: string, image: string, currentPage: string, onClick: () => void})
{

    return(
        <Link href={page} className="w-[100%]">
            <button onClick={onClick} className={`h-[3rem] w-[100%] flex justify-center items-center bg-white text-black ${currentPage === page ?  "bg-blue-200" : ""}`}>
                <Image 
                    src={`../../${image}`}
                    width={30}
                    height={30}
                    alt="Image not found"
                />
            </button>
        </Link>
    );
}

结果：同样存在相同问题。

我的猜测是，在使用状态的示例中，状态先更新、浏览器刷新后Tailwind才更新，导致HTML显示正常但页面无变化，但无法解释修改颜色类名为何能临时解决问题；非状态版本的情况也无法理解。

内容的提问来源于stack exchange，提问作者tnr