如何在Next.js中使用Tailwind将<nav>设为横向而非纵向

你的导航栏变成纵向的原因主要有两个小问题，修改起来很简单：

1. 类名语法错误：nav标签里的bg-gray-800, bg-slate-900用了逗号分隔类名，这不符合Tailwind CSS的规则，类名之间必须用空格分隔，逗号会导致样式失效，间接影响布局。
2. 虽然flex默认是横向排列，但显式指定flex-row能更明确地控制布局，避免意外情况。

修改后的完整代码如下：

import { Inter } from "@next/font/google";

const inter = Inter({ subsets: ["latin"] });

export default function Nav() {
  return (
    <nav className="bg-gray-800 bg-slate-900">
      <div className="container mx-auto px-6 py-4 flex flex-row flex-wrap items-center">
        <div className="px-4 py-2 rounded-lg text-white hover:bg-gray-700">
          <a href="/">Home</a>
        </div>
        <div className="px-4 py-2 rounded-lg text-white hover:bg-gray-700">
          <a href="/jobs">Jobs</a>
        </div>
      </div>
    </nav>
  );
}

关键修改点说明： #

• 把nav类名里的逗号换成空格，修正Tailwind语法错误
• 给容器添加flex-row（显式指定横向排列，可选但更清晰）和items-center（让导航项垂直居中，优化视觉效果）
• 保留flex-wrap确保在小屏幕上导航项可以自动换行，适配移动端

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