Tailwind CSS开发标签菜单如何实现标签名居中、XIcon居右

架构老林

2026-10-5

最优实现方案

核心思路是通过绝对定位让关闭图标脱离正常文档流，避免影响标签名的居中逻辑，改动量最小且完全符合需求，具体调整如下：

改动点说明

给每个标签项的<a>标签添加relative类，作为关闭图标的定位上下文
给<XIcon>添加absolute right-2类，固定在标签项右侧，无需额外节点调整布局
可选优化：给<a>标签加pr-8类，预留足够的右侧空间，避免小尺寸标签下文字和关闭图标重叠

修改后完整代码

<div class="hidden sm:block">
  <div class="border-b border-gray-200">
    <nav class="-mb-px flex justify-between" aria-label="Tabs"> 
      <a 
        v-for="tab in tabs" 
        :key="tab.name" 
        :href="tab.href" 
        :class="[
          tab.current ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:text-gray-900 hover:border-gray-300 hover:bg-gray-200', 
          'w-1/4 py-4 px-1 pr-8 text-center border-b-2 font-medium text-sm relative'
        ]" 
        :aria-current="tab.current ? 'page' : undefined"
      >
        {{ tab.name }}             
        <XIcon class="h-6 w-6 text-black absolute right-2" aria-hidden="true" />
      </a>
    </nav>
  </div>
</div>