使用Tailwind CSS+React时激活菜单的边框与文字颜色不生效

你的核心问题可通过以下几种方式排查修复：

1. 修复条件类写法（避免无效类干扰） #

当前用&&拼接条件类的逻辑，在路径不匹配时会向className中插入字符串"false"，虽不报错但可能干扰样式解析。改用三元表达式返回空字符串：

修改每个<li>的className：

// 原写法
${checkPath("/") && "text-black border-b-red-500"}

// 修改后
${checkPath("/") ? "text-black border-b-red-500" : ""}

完整示例：

<li className={`py-6 text-sm border-b-[3px] text-gray-500 font-semibold border-b-transparent ${checkPath("/") ? "text-black border-b-red-500" : ""} cursor-pointer`} onClick={() => navigate('/')}>Home</li>

2. 改用NavLink组件（更可靠的激活状态方案） #

react-router-dom提供了专门处理导航激活的NavLink组件，比手动用useLocation判断更稳定，还能避免路径匹配的潜在问题：

替换原有<li>和导航逻辑：

import { NavLink, useNavigate } from "react-router-dom";

const Header = () => {
    const navigate = useNavigate();

    return (
        <div className="bg-white border-b shadow-sm sticky top-0 z-50">
            <header className="flex justify-between items-center px-3 max-w-6xl mx-auto">
                <div>
                    <img src="https://static.rdc.moveaws.com/images/logos/rdc-logo-default.svg" alt="" className="h-5 cursor-pointer" onClick={() => navigate('/')} />
                </div>
                <div>
                    <ul className="flex gap-5">
                        <NavLink 
                            to="/" 
                            className={({ isActive }) => 
                                `py-6 text-sm border-b-[3px] font-semibold cursor-pointer ${
                                    isActive ? "text-black border-b-red-500" : "text-gray-500 border-b-transparent"
                                }`
                            }
                        >
                            Home
                        </NavLink>
                        <NavLink 
                            to="/offers" 
                            className={({ isActive }) => 
                                `py-6 text-sm border-b-[3px] font-semibold cursor-pointer ${
                                    isActive ? "text-black border-b-red-500" : "text-gray-500 border-b-transparent"
                                }`
                            }
                        >
                            Offers
                        </NavLink>
                        <NavLink 
                            to="/sign-in" 
                            className={({ isActive }) => 
                                `py-6 text-sm border-b-[3px] font-semibold cursor-pointer ${
                                    isActive ? "text-black border-b-red-500" : "text-gray-500 border-b-transparent"
                                }`
                            }
                        >
                            Sign In
                        </NavLink>
                    </ul>
                </div>
            </header>
        </div>
    )
}

export default Header

3. 排查Tailwind配置（确保样式被生成） #

若以上方法仍无效，检查tailwind.config.js的content数组是否包含组件文件路径：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}", // 确保覆盖所有组件文件路径
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind JIT模式只会为content匹配到的文件中的类生成样式，若组件路径未被包含，对应样式不会生效。

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