I need help udnerstanding the tailwind and why it behaves in this way.

I have my application using nextjs and tailwind.

I have a navbar which should looks like this:

I am achieving this by having following code:

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import './style.css';

interface NavProp {
  navItems: {
    label: string;
    url: string;
  }[];
}

export default function Nav({ navItems }: NavProp) {
  const pathname = usePathname();

  return (
    <div className="container">
      {navItems.map((navItem, index) => (
        <Link
          key={index}
          href={navItem.url}
          className={` ${pathname === navItem.url ? 'active-item' : 'inactive-item'}`}
          style={{
            margin: '0 20px',
            borderRadius: '0',
            padding: '10px 0',
            paddingBottom: '10px',
          }}
        >
          {navItem.label.toUpperCase()}
        </Link>
      ))}
    </div>
  );
}

In this part I only create the Nav Items. The problem that I am facing right now is using of style give the elements more styling. such as having a padding between them.

i tried to move the style into my css where I have my css in form of tailwind:

/* Container styles */
.container {
  @apply flex flex-col space-y-1 text-white lg:flex-row lg:space-x-4 lg:space-y-0;
}

/* Link styles */
.nav-link {
  @apply mx-5 py-2; /* mx-5 for horizontal margin, py-2 for vertical padding */
}

.active-item {
  @apply border-b-4 border-pink-500 text-pink-500;
}

.inactive-item {
  @apply border-b-4 border-gray-900 hover:border-pink-500 hover:text-pink-500;
}

the class nav-link is what I want to use for styling so if I do:

 className={` nav-link ${pathname === navItem.url ? 'active-item' : 'inactive-item'}`}

and I remove the style from the code, then I get:

I dont understand why it only applies it to the first item and not for the rest, in that case how can I put padding between the navitems?