tailwind css默认不提供columns工具类，v3.x及之前版本未封装column-count等属性，v4尚未发布；需手写css或使用插件实现，但各有局限。
columns类在Tailwind中根本不存在
Tailwind CSS默认不提供 columns 相关的工具类（比如 columns-3 或 column-gap-4）。这是很多人查文档失败、写完样式没反应的直接原因——不是你写错了，是它压根没内置。
浏览器原生的多列布局靠的是 column-count、column-gap、column-rule 这些 CSS 属性，而 Tailwind v3.x 及之前版本选择不封装它们。v4 尚未正式发布，当前稳定版仍无此支持。
想用columns属性，必须手写CSS或插件
有两种可行路径，取决于你是否愿意引入额外依赖：
- 轻量方案：在
@layer utilities中手动添加常用 column 工具类，例如：
@layer utilities {
.columns-2 { columns: 2; }
.columns-3 { columns: 3; }
.column-gap-4 { column-gap: 1rem; }
.column-rule { column-rule: 1px solid #e5e7eb; }
}
然后就能在 HTML 中用 class="columns-3 column-gap-4 column-rule"。
- 插件方案：安装
@tailwindcss/typography（它内部启用了部分 column 样式），但注意——它只对prose容器内的文本生效，且会覆盖字体、行高、间距等，不适合通用布局场景。 - 别误用
grid或flex替代：它们是块级分布，无法实现真正的“文字自动分栏断行”，报纸式排版的核心是内容流连续、跨列换行，这点只有原生columns能做到。
使用原生columns时容易忽略的三个坑
即使你绕过 Tailwind 直接写 CSS，也常因细节翻车：
-
columns对子元素有强限制：只对普通文本、<p></p>、<span></span>等内联内容有效；如果里面嵌了display: block的 div 或设置了break-inside: avoid，列就会提前截断甚至崩溃。 - 响应式断裂：
columns: 3在小屏上会挤成极窄竖条，必须配合媒体查询重置，例如@media (max-width: 640px) { .columns-3 { columns: 1; } }。 - Firefox 与 Safari 行为不一致：Safari 对
column-fill: balance支持更严格，Firefox 有时会把最后一列拉得特别长；若需精确控制，得加height或用column-fill: auto配合break-after手动切分。
真正适合报纸排版的替代思路
如果目标是“视觉像报纸”，而非必须用 CSS columns，可以考虑更可控的组合方案：
- 用
grid-cols-3+space-y-4模拟三栏，每栏放独立<article></article>——适合标题+摘要类内容，但不是连续正文。 - 用
prose（来自@tailwindcss/typography）包裹长文，再通过自定义prose-headings:columns-2等局部覆盖，它已预设了合理的断行和留白。 - 服务端或 JS 分段：把长文本按字数/段落数切分成数组，用
map()渲染到不同div，再用flex flex-col垂直堆叠——牺牲一点语义，换来 100% 可控的分栏高度和响应行为。
column 布局的脆弱性远高于表面看起来的程度，尤其当内容长度不可控、需要打印或适配阅读器时，它的断行逻辑几乎无法调试。真要上线，先拿真实数据跑一遍长文本，再检查 iOS 和 Android WebView 表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
