Переход с помощью Tailwindcss не работает

Это мой следующий компонент js navbar, который я использовал в файле шаблона "/":

И вот где я его использовал (template.tsx):

И это часть моего css-файла для класса элемента активной панели навигации и nav-item:

Почему мой переход не работает в классе nav-item? Я попробовал переход в моем классе active, но он не работает. Я все проверил, но не нашел ответа. Пожалуйста, помогите мне с этой проблемой.

Я пытался получить помощь от чат-ботов, но ничего не нашел.

"use client";

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

const Navbar = () => {
  const path = usePathname();

  return (
    <nav className="flex justify-between border-b sticky top-0 backdrop-blur-sm z-50">
      <Link className="p-7" href="/">MA</Link>
      <div className="flex">
        <Link
          href="/experience"
          className={`nav-item ${
            path == "/experience" ? "active" : ""
          }`}
        >
          Experience
        </Link>
        <Link
          href="/projects"
          className={`nav-item ${
            path == "/projects" ? "active" : ""
          }`}
        >
          Projects
        </Link>
        <Link
          href="/about"
          className={`nav-item ${
            path == "/about" ? "active" : ""
          }`}
        >
          About
        </Link>
        <Link
          href="/contact"
          className={`nav-item ${
            path == "/contact" ? "active" : ""
          }`}
        >
          Contact
        </Link>
      </div>
    </nav>
  );
};

export default Navbar;

import Navbar from "../components/navbar/navbar";

export default function Template({ children }: { children: React.ReactNode }) {
  return (
    <div className="px-2">
      <Navbar />
      <div className="px-3">{children}</div>
    </div>
  );}

.active{
  @apply text-slate-200 font-medium border-b border-black translate-y-[0.8px];
}
.nav-item{
  @apply px-5 cursor-pointer py-7;
  transition: all 0.6s ease-in-out;
}