Tailwind CSS 无法将样式应用于所有导航栏项目的问题

Question

我需要帮助来理解顺风以及它为什么会这样。

我的应用程序使用 nextjs 和 tailwind。

我有一个导航栏，应该如下所示：

我通过以下代码实现这一目标：

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>
  );
}

在这一部分中，我仅创建导航项。我现在面临的问题是使用样式给元素更多的样式。例如它们之间有填充物。

我尝试将样式移动到我的CSS中，其中我的CSS采用顺风形式：

/* 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;
}

类

nav-link

是我想用于样式设置的类，所以如果我这样做：

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

然后我从代码中删除样式，然后我得到：

我不明白为什么它只应用于第一个项目而不适用于其余项目，在这种情况下，我如何在 navitems 之间放置填充？

Answer 1

首先，您可以使用 Tailwind CSS 类替换所有内联

style

属性。

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={`nav-link ${pathname === navItem.url ? 'active-item' : 'inactive-item'}`}
        >
          {navItem.label.toUpperCase()}
        </Link>
      ))}
    </div>
  );
}

您还可以更新您的 style.css 样式

/* 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;
}

请阅读：

 tailwind.config.js

：https://tailwindcss.com/docs/configuration

Tailwind.config.js 看起来像

module.exports = {
  content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

请检查。