如何用Tailwind创建响应式等宽列且无需重复类名？

你提到的两种写法确实能实现需求，但重复给每个列加类名确实繁琐。这里有两种更简便的方式，让所有列默认拥有等宽行为：

方法1：使用Tailwind的全局子元素选择器（无需额外配置） #

Tailwind v3.2及以上版本支持*:前缀，能给父元素的所有直接子元素批量应用样式。你只需在父容器上添加一次类，就能让所有列自动继承等宽规则：

<div class="container mx-auto p-10">
  <div class="flex flex-col md:flex-row gap-8 md:*:flex-1">
    <div class="h-[100px] bg-gray-300"></div>
    <div class="h-[100px] bg-gray-400"></div>
    <div class="h-[100px] bg-gray-500"></div>
  </div>
</div>

说明：

• 移动端（默认）是flex-col布局，子元素会自动占满父容器宽度，无需额外加w-full；
• md:*:flex-1表示在屏幕宽度≥768px时，给所有直接子元素添加flex-1，实现横向等宽分配。

方法2：自定义复用类（适合频繁使用的场景） #

如果你的项目中经常需要这种布局，可以在Tailwind配置里自定义一个工具类，后续直接复用：

1. 修改tailwind.config.js：

module.exports = {
  theme: {
    extend: {
      utilities: {
        '.equal-width-columns': {
          '& > *': {
            '@apply w-full md:flex-1': {},
          },
        },
      },
    },
  },
}

2. 使用自定义类：

<div class="container mx-auto p-10">
  <div class="flex flex-col md:flex-row gap-8 equal-width-columns">
    <div class="h-[100px] bg-gray-300"></div>
    <div class="h-[100px] bg-gray-400"></div>
    <div class="h-[100px] bg-gray-500"></div>
  </div>
</div>

说明：自定义类封装了移动端w-full和桌面端flex-1的规则，后续只需给父容器加equal-width-columns即可，代码更简洁易维护。

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