如何用TailwindCSS在NextJS中让两个React组件同行显示？

你的问题出在flex容器的方向设置上：你用了flex-col类，这个类会强制flex子元素垂直排列（列方向），所以两个External组件才会上下堆叠。

要实现横向并排，只需要把flex-col替换成flex-row（或者直接删掉flex-col，因为Tailwind中flex默认就是flex-row方向），同时可以根据需求添加间距、对齐相关的类：

修改后的代码示例：

<div class="flex flex-row justify-between w-full gap-4">
    <External />
    <External />
</div>

关键说明： #

• flex-row：指定flex容器的子元素沿水平方向排列（这是flex的默认值，所以也可以直接写<div class="flex justify-between w-full gap-4">）
• gap-4：给两个组件之间添加固定间距（可以根据需要调整数值，比如gap-2、gap-6）
• 如果需要让组件在垂直方向上居中对齐，可以加上items-center类

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