寻找可在WordPress中实现文本自动分栏的Tailwind CSS工具类

解决方案 #

Tailwind CSS 原生提供了多列布局相关的工具类，可直接替代你自定义的.cols类，无需额外编写自定义样式。

你当前的自定义样式：

p.cols {
  column-count: 2;
  column-gap: 20px;
}

等效于以下两个Tailwind原生工具类的组合：

• columns-2：对应column-count: 2，设置文本分栏数为2
• gap-x-5：Tailwind默认间距规则为1单位=4px，20px对应5单位，该类对应column-gap: 20px，和你原有间距设置完全匹配

你直接给WordPress对应的段落元素添加columns-2 gap-x-5两个类即可实现完全相同的分栏效果。

如果需要做响应式适配，比如仅在平板及以上宽度设备上分栏，移动端保持单栏，可以加上断点前缀：md:columns-2 md:gap-x-5，默认md断点对应768px宽度，可根据需求调整断点前缀为sm/lg等。

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