Use the
break-before-*
utilities to control how a column or page break should behave before an element. For example, use the
break-before-column
utility to force a column break before an element.
<
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 lets you conditionally apply utility classes in different states using variant modifiers. For example, use
hover
:
break-before-column
to only apply the
break-before-column
utility on
hover
.
<
div
class
=
"
hover:break-before-column
"
>
</
div
>
For a complete list of all available state modifiers, check out the
Hover, Focus, & Other States
documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use
md:
break-before-column
to apply the
break-before-column
utility at only medium screen sizes and above.
<
div
class
=
"
md:break-before-column
"
>
</
div
>
To learn more, check out the documentation on
Responsive Design
,
Dark Mode
and
other media query modifiers
.