在Tailwind中实现两个Span元素的justify-content: space-between效果

在Next.js项目中使用Tailwind CSS，希望实现两个子span元素的两端对齐效果（justify-content: space-between），让箭头图标靠容器最右侧对齐。已为父span添加flex justify-between类，且在图标元素上尝试了Tailwind的justify、align系列相关属性，但始终无法达到预期。项目的globals.css中已正确引入@tailwind base;@tailwind components;@tailwind utilities;。

效果说明：

• 预期：箭头图标与左侧标题文本分别靠容器左右两端对齐
• 当前：箭头图标紧贴在标题文本后方，未靠右对齐

对应的代码片段：

<span className='text-lg flex justify-between'>
  <span>{title}</span>
  <span>
    {showPreview ? (
      <KeyboardArrowUpIcon className='justify-end justify-self-end justify-items-end content-end items-end self-end' />
    ) : (
      <KeyboardArrowDownIcon className='justify-end justify-self-end justify-items-end content-end items-end self-end' />
    )}
  </span>
</span>

核心问题是父span作为行内元素，默认不会占满可用宽度，justify-between需要flex容器有足够的宽度才能生效。

只需要给父span添加w-full类（让容器占满父元素宽度），同时删掉图标上多余的无效属性即可：

<span className='text-lg flex justify-between w-full'>
  <span>{title}</span>
  <span>
    {showPreview ? (
      <KeyboardArrowUpIcon />
    ) : (
      <KeyboardArrowDownIcon />
    )}
  </span>
</span>

如果父容器本身有宽度限制，也可以用flex-1替代w-full，让flex容器自动填充剩余空间，效果一致。

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