Tailwind flex-direction在Chrome等浏览器中无法正常排列的问题

1. 确认Tailwind CSS是否正确生效 #

不管是Next.js还是纯HTML场景，Tailwind的样式类必须能被正确解析，否则flex、flex-row这些类不会起作用，div会保持默认的display:block（纵向排列）：

Next.js 场景 #

• 检查依赖是否齐全：确保已安装 tailwindcss、postcss、autoprefixer
• 检查tailwind.config.js的content配置：必须包含你的页面/组件文件路径，否则Tailwind不会生成对应样式
• 检查全局CSS文件（如app/globals.css）是否导入了Tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

纯HTML 场景 #

• 必须在HTML头部引入Tailwind的CDN资源，否则样式类无法生效：

<script src="https://cdn.tailwindcss.com"></script>

2. 排查样式冲突 #

如果Tailwind已正确配置，那大概率是样式被覆盖：

• 用浏览器开发者工具查看父元素的计算样式：确认display是flex，flex-direction是row，如果不是，检查祖先元素是否设置了flex-col、display:block等冲突样式
• 检查全局自定义CSS：是否存在类似div { display: block !important; }的规则，强制将div设为块级元素，这种会直接覆盖Tailwind的flex类，需要修改或删除该规则

3. 最小化测试验证 #

创建一个无其他干扰的最小化示例：

• Next.js 组件示例：

export default function TestLayout() {
  return (
    <div className="flex flex-row">
      <div>01</div>
      <div>02</div>
      <div>03</div>
    </div>
  )
}

• 纯HTML示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="flex flex-row">
    <div>01</div>
    <div>02</div>
    <div>03</div>
  </div>
</body>
</html>

如果这个最小示例能正常横向排列，说明问题出在你原有代码的其他部分（比如嵌套的父元素样式、全局CSS冲突）；如果还是纵向，那肯定是Tailwind的配置/引入有问题。

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