Tailwind CSS v3.x 默认不提供columns-2等工具类，需手动在@layer utilities中定义；columns布局依赖块级流上下文，禁用flex/grid容器、需设w-full、避免height限制，并须与column-gap等配合使用，不可与grid混用。
Tailwind CSS 默认不提供 columns-2、column-gap-4 这类工具类，直接写根本不会生效——不是你漏了配置，是 v3.x 稳定版压根没封装这些属性。
为什么加了 columns-3 却没反应
多列布局依赖原生 CSS 的「块级流上下文」，稍有破坏就彻底失效。最常踩的坑是：
- 把
columns-3加在flex或grid容器上——display 值会覆盖 column 行为，浏览器直接忽略 - 子元素是
<div> 块级容器且没设 <code>break-inside-avoid，整块内容被塞进第一栏，不拆分 - 父容器没设明确宽度（比如缺
w-full或max-w-4xl），或错误设置了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; }
}
然后就能在 HTML 中直接使用：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; }
}
}
否则在小屏上硬套 columns-4，文字会缩成窄缝甚至重叠。
columns 和 grid-cols-* 别混用在同一容器上
两者底层机制冲突：columns-3 是对内容流做视觉断行，grid-cols-3 是创建独立轨道容器。同时应用会导致不可预测行为，比如列宽塌陷、换行错乱或完全不渲染。
更关键的是：多列布局无法控制某段内容固定在哪一栏，也不能跨列；而 grid 支持 col-span-2、显式定位、高度对齐等——选哪个，取决于你要的是「报纸式文本流」还是「卡片式区块控制」。
真正容易被忽略的一点：columns 的实际列数永远由内容长度、容器宽度、字体渲染共同决定，CSS 只是建议。哪怕写了 columns: 5，如果容器太窄或内容太少，浏览器可能只出 2 列——这不是 bug，是它的设计逻辑。
