如何在Tailwind中设置非通高的垂直分隔线？

Tailwind的divide-x类是通过给列元素添加边框实现分隔线的，而你的列元素设置了h-full，所以分隔线会撑满容器全高。要实现不占满100%高度的垂直分隔线，可采用以下两种实用方法：

方法一：利用伪元素自定义分隔线 #

移除原有的md:divide-x divide-primary divide-inset类，给需要添加分隔线的列（第2、3列）添加伪元素，精准控制分隔线的高度与位置：

<div className="grid md:grid-cols-4 rounded-[48px] md:h-48 grid-cols-1 bg-quater mx-auto w-5/6 text-white">
  <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text1 } </div>
  <!-- 第2列：添加左侧短分隔线 -->
  <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5 relative md:before:content-[''] md:before:absolute md:before:left-0 md:before:top-1/4 md:before:bottom-1/4 md:before:w-[1px] md:before:bg-primary"> { language.secc2text2 } </div>
  <!-- 第3列：添加左侧短分隔线 -->
  <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5 relative md:before:content-[''] md:before:absolute md:before:left-0 md:before:top-1/4 md:before:bottom-1/4 md:before:w-[1px] md:before:bg-primary"> { language.secc2text3 } </div>
  <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text4 } </div>
</div>

关键说明： #

• 用relative给列元素设置定位上下文，伪元素基于此定位
• top-1/4和bottom-1/4让分隔线仅占据容器中间50%高度，可按需调整为top-1/5 bottom-1/5（中间60%高度）等数值
• w-[1px]和bg-primary匹配你原有的分隔线样式

方法二：插入独立分隔线元素 #

调整Grid布局结构，在内容列之间插入专门的分隔线元素，直接控制其高度与对齐方式：

<div className="grid md:grid-cols-[1fr_1px_1fr_1px_1fr_1px_1fr] rounded-[48px] md:h-48 grid-cols-1 bg-quater mx-auto w-5/6 text-white">
  <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text1 } </div>
  <!-- 分隔线1 -->
  <div className="hidden md:block bg-primary self-center h-1/2"></div>
  <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text2 } </div>
  <!-- 分隔线2 -->
  <div className="hidden md:block bg-primary self-center h-1/2"></div>
  <div className="font-gmr text-2xl w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text3 } </div>
  <!-- 分隔线3 -->
  <div className="hidden md:block bg-primary self-center h-1/2"></div>
  <div className="font-raleway w-full h-full flex flex-col justify-center text-center p-5"> { language.secc2text4 } </div>
</div>

关键说明： #

• 修改md:grid-cols为[1fr_1px_1fr_1px_1fr_1px_1fr]，明确内容列（1fr）与分隔线列（1px）的宽度
• 分隔线元素用hidden md:block控制仅在大屏显示，self-center实现垂直居中，h-1/2设置为容器高度的50%
• 小屏保持grid-cols-1布局，分隔线自动隐藏，和原布局逻辑一致

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