如何在Tailwind CSS中实现竖排文本与横排文本并排布局

针对你遇到的响应式布局和文本排版问题，以下是调整后的代码及优化说明：

修改后的完整代码 #

HTML #

<div class="grid h-screen sm:grid-rows-[1fr_1fr] lg:grid-cols-2">
  <section class="bg-black text-white flex items-center justify-center p-4 sm:p-8">
    <div class="grid w-full grid-cols-1 sm:grid-cols-2 gap-6 items-center">
      <p class="texto text-sm:text-3xl lg:text-5xl">EN BOUCHE:</p>
      <p class="text-sm:text-3xl lg:text-5xl">Au premier abord déconcertant, il libère ensuite toute sa palette aromatique allant du fruit exotique à la fraicheur des Astéracées.</p>
    </div>
  </section>
  <section class="bg-white flex items-center justify-center p-4 sm:p-8">
    <div class="grid w-full grid-cols-1 sm:grid-cols-2 gap-6 items-center">
      <p class="text-sm:text-3xl lg:text-5xl">"On parie que les hard seltzer ne sont pas une mode passagère mais le reflet de changements profonds des modes de consommation"</p>
      <p class="texto text-sm:text-3xl lg:text-5xl">HARD SELTZER</p>
    </div>
  </section>
</div>

CSS（整合Tailwind规范） #

@layer components {
  .texto {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
  }
}

关键优化点 #

1. 响应式网格布局

   • 外层grid设置h-screen确保全屏高度，移动端默认单列堆叠，sm断点切换为两行等高布局，lg断点切换为两列布局
   • 内部grid添加grid-cols-1 sm:grid-cols-2，避免移动端两列挤压，大屏时恢复分栏

2. 文本排版与溢出控制

   • 文本大小改为响应式text-sm:text-3xl lg:text-5xl，适配不同屏幕尺寸
   • 给section添加flex items-center justify-center确保内容居中，p-4 sm:p-8添加响应式内边距，防止文本贴边溢出

3. 垂直文本优化

   • 将旋转逻辑整合到自定义类.texto中，减少HTML冗余
   • 用@layer components声明自定义类，确保优先级与Tailwind工具类一致

4. 内容对齐

   • 内部grid添加gap-6增加列间距，items-center让两列内容垂直居中对齐

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