如何在React中使用Tailwind CSS实现Div内元素两端对齐？

你的代码存在两个关键问题：

1. 父容器使用了错误的类名justify-content，Tailwind中没有这个类，要实现两端对齐得用justify-between。
2. 子元素上的justify-start和justify-end完全无效，这类对齐类是给flex容器用的，不是子元素。

修改后的代码如下：

const Header = () => {
  return (
    <div className='flex border-4 border-indigo-600 h-12 justify-between items-center'>
      <div>first element</div>
      <div>second element</div>
    </div>
  )
}

关键说明： #

• justify-between：给flex父容器添加这个类，会让子元素沿水平主轴两端对齐，自动填充中间空白，直接实现左元素靠左、右元素靠右的效果。
• items-center（可选）：如果需要让元素在垂直方向居中显示，加上这个类能让内容在h-12的容器内垂直居中，优化视觉体验。
• 子元素不需要额外对齐类，直接正常编写即可。

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