如何在Tailwind CSS中实现单元素居中、多元素justify-between对齐？

问题核心：使用justify-between时，单个子元素因无其他元素分配剩余空间，会默认靠左对齐。以下是两种可行的解决方案：

方案一：Tailwind任意选择器变体（推荐） #

直接在容器类中添加自定义选择器，无需额外CSS：

<div class="flex items-center w-full max-w-screen-lg justify-between [&>_:only-child]:mx-auto">
  <div class="py-4">01</div>
  <!-- 添加第二个元素时会自动两端对齐 -->
  <!-- <div class="py-12">02</div> -->
</div>

• 逻辑：容器默认用justify-between保证多元素两端对齐；通过[&>_:only-child]:mx-auto，给唯一子元素添加mx-auto（左右自动外边距），强制其居中。

方案二：自定义Tailwind工具类（兼容旧浏览器） #

如果需要兼容不支持CSS嵌套选择器的环境，可自定义工具类：

@layer utilities {
  .justify-adaptive {
    @apply flex items-center w-full max-w-screen-lg justify-between;
  }
  .justify-adaptive > *:only-child {
    @apply mx-auto;
  }
}

使用时只需替换容器类：

<div class="justify-adaptive">
  <div class="py-4">01</div>
</div>

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