如何在Next.js+Tailwind+Radix UI中实现手风琴标题左对齐

你的问题根源在AccordionTrigger组件的内部结构上——包裹标题的div设置了flex justify-center，强制内容居中，抵消了你想要的左对齐效果。即使你在父容器设置了对齐，这个内部的居中样式优先级更高。

修改方案：调整Accordion.tsx中的AccordionTrigger组件 #

直接修改标题容器的样式，移除强制居中的设置：

const AccordionTrigger = React.forwardRef<
  React.ElementRef<typeof AccordionPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <AccordionPrimitive.Header className="flex">
    <AccordionPrimitive.Trigger
      ref={ref}
      className={cn(
        "skills-title flex items-center justify-between font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
        className
      )}
      {...props}
    >
      {/* 移除justify-center，让文本自然左对齐 */}
      <div className="flex items-center p-6 pl-0">
        {children}
      </div>
      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
    </AccordionPrimitive.Trigger>
  </AccordionPrimitive.Header>
))

关键调整点： #

• 去掉了外层div的justify-center样式，这是导致标题居中的核心原因
• 保留items-center让标题和右侧箭头垂直居中（如果需要顶部对齐可以换成items-start）
• 标题文本现在会默认左对齐，同时Trigger的justify-between会让标题区域和箭头分别占据左右空间

如果需要更明确的左对齐，可以给标题容器加上text-left：

<div className="flex items-center p-6 pl-0 text-left">
  {children}
</div>

额外优化：减少不必要的嵌套 #

原来的标题区域有两层div嵌套，可以简化成一层，让结构更清晰：

<div className="p-6 pl-0 flex items-center">
  {children}
</div>

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