columns类在tailwind v3.x中默认未提供，需手动在@layer utilities中定义；其生效前提为父容器启用块级流（非flex/grid）、子元素为流式内容、容器有明确宽度且columns-*与column-gap等类共用。
columns-类为什么加了没反应
不是你写错了，是 Tailwind v3.x 默认根本没提供 columns-2、column-gap-4 这类工具类——它们不在默认配置里，直接用必然无效。多列布局依赖原生 CSS 的块级流上下文，一旦破坏就彻底失效。
最常踩的坑：
- 把 columns-3 加在 flex 或 grid 容器上 → display 被覆盖，浏览器直接忽略
- 子元素是 <div> 且没加 <code>break-inside-avoid → 整块内容被塞进第一栏，不拆分
- 父容器缺 w-full 或设了 height → 内容撑不满，列数降级为 1
- 单独用 column-gap-4 → 它必须和 columns-* 同时出现才生效
如何在 Tailwind v3.x 中真正启用 columns
不用等 v4，也不用装插件。最轻量的方式是在 @layer utilities 中手动补全高频用例：
@layer utilities {
.columns-2 { columns: 2; }
.columns-3 { columns: 3; }
.columns-4 { columns: 4; }
.column-gap-4 { column-gap: 1rem; }
.column-rule { column-rule: 1px solid #e5e7eb; }
}
然后就能写：class="columns-3 column-gap-4 column-rule"。
注意：column-rule 只画在列之间，不占外边距，别和 border 混用。
响应式多列怎么避免手机上挤成细条
Tailwind 的断点类（如 md:columns-3）对 columns 属性无效——它不支持自动适配列数。必须手写媒体查询重置：
@layer utilities {
.columns-1 { columns: 1; }
.columns-2 { columns: 2; }
.columns-3 { columns: 3; }
@media (min-width: 640px) { .sm\:columns-2 { columns: 2; } }
@media (min-width: 768px) { .md\:columns-3 { columns: 3; } }
@media (min-width: 1024px) { .lg\:columns-4 { columns: 4; } }
}
别指望 sm:columns-2 自动生效，v3.x 不解析这类组合；真要响应式，就得这样显式声明。
break-after-column 在 Grid 里为啥不生效
break-after-column 是 break-after: column 的封装，只对 columns-* 触发的多列流式布局起作用。Grid 是独立布局上下文，浏览器根本不识别“列断”语义。
你在 grid-cols-3 容器里加 break-after-column → 完全无效果，CSS 层叠中该声明被忽略。
想让某张卡片之后强制换栏？必须：
- 把它放进 columns-3 的块级容器里
- 卡片本身是流式子元素（比如 <div class="break-after-column">）<br>
- 卡片不能用 <code>display: flex 或 float，否则脱离列流
- 配合 break-inside-avoid 防止图文混排时被劈开
Safari 对 break-after 支持残缺：iOS 14 及更早版本会忽略甚至错乱换行，真机测试不可跳过。
