在元素前分页

​基础用法

​设置 break-before 行为

使用 break-before-* 实用程序可控制元素前的分栏或分页符的行为方式。例如，使用 break-before-column 实用程序可强制在元素前进行分栏。

<div class="columns-2">
  <p>Well, let me tell you something, ...</p>
  <p class="break-before-column">Sure, go ahead, laugh...</p>
  <p>Maybe we can live without...</p>
  <p>Look. If you think this is...</p>
</div>

​有条件申请

​悬停、聚焦和其他状态

Tailwind 允许您使用变体修饰符有条件地在不同状态下应用实用程序类。例如，使用 hover:break-before-column 来仅 在 hover应用 break-before-column.

<div class="hover:break-before-column">
  <!-- ... -->
</div>

详细了解, 请参考 Hover, Focus, & Other States 文档.

​断点和媒体查询

您还可以使用变体修饰符来定位媒体查询，例如响应式断点、暗模式、首选减少运动等。例如, 使用 md:break-before-column 来应用 break-before-column 程序，适用于中等屏幕尺寸及以上。

<div class="md:break-before-column">
  <!-- ... -->
</div>

进一步了解，请参考 响应式设计, 暗黑模式 和 媒体查询.