Tailwind CSS Break Before

Break Before is a CSS property that controls page or column breaks before an element. This is helpful when dealing with multi-column layouts and print styles where controlled breaks are necessary.

Tailwind CSS simplifies the use of break before properties by providing a range of utility classes that you can effortlessly apply to your elements. This guide delves into using these utilities, explaining how to use them in various contexts to achieve precise control over content flow.

Overview of Break Before

Adding the Break Before

To insert a break point immediately before an element, such as a paragraph, heading, or a specific container— use the break-before-* utilities.

In this snippet, the break-before-page class (which corresponds to standard CSS break-before: page;) ensures that when this layout is printed, the second container will force itself onto a new page or column.

export default function App() {
  return <h1>Hello world</h1>
}

States and Responsiveness

Tailwind's utility classes for break-before properties can also be combined with state and responsive modifiers to apply specific breaks based on states like hover and focus and the screen width.

Hover and Focus States

Break before is often considered for printed or column based layouts. When using columns, you can also use it with state modifiers to apply breaks only when certain states are active. For example, you might want to force a column break before an element only when a user hovers it.

You can achieve this by prepending state modifiers to the utility class. Ensure your element is part of a multi-column layout for break before to have an effect.

In the below example, the browser applies a column break before the second element when the user clicks on it.

export default function App() {
  return <h1>Hello world</h1>
}

Breakpoint Modifiers

Tailwind's break-before-* utilities can also be combined with the breakpoint modifiers to apply breaks only on specific screens and above. Use Tailwind's breakpoint modifiers like sm, md, lg, etc. to apply this behavior.

export default function App() {
  return <h1>Hello world</h1>
}

Real World Examples

Product Catalog

A responsive product layout that breaks columns for better layout of an e-commerce catalog.

export default function App() {
  return <h1>Hello world</h1>
}

Blog Post Archive

A blog archive section that uses break-before-page for clean printing of article sections.

export default function App() {
  return <h1>Hello world</h1>
}

Team Directory

A team directory layout that implements column breaks on every two employee cards.

export default function App() {
  return <h1>Hello world</h1>
}

Course Curriculum

A printable course curriculum layout that uses page breaks between different course sections.

export default function App() {
  return <h1>Hello world</h1>
}

News Feed

A news feed where different news categories start on new lines using break-before-page.

export default function App() {
  return <h1>Hello world</h1>
}

Best Practices

Maintain Design Consistency

Applying the break-before-* utility should align with the overall design structure to ensure a uniform and professional appearance across your project. Page breaks should be applied with intention, particularly when dealing with paginated content, print styles, or structured layouts such as reports and invoices. Without proper planning, inconsistencies in element positioning can lead to visual fragmentation, disrupting the flow of the interface.

One effective approach is to define a consistent set of page-break rules that correspond to different content types. For example, ensuring that headers always start on a new page using break-before-page while keeping content sections on the same page whenever possible avoids unnecessary gaps. By keeping break rules uniform, readability and content structure remain predictable.

Optimize for Reusability

Reusable components provide an efficient way to standardize break-before-* usage while keeping the project scalable. Instead of manually adding break utilities in different sections, abstract break logic into reusable layout components to simplify maintenance.

For example, a reusable ContentBlock component that accepts breakBefore as a prop ensures that different content sections can dictate their break behavior without modifying individual styles. By using this approach, you can dynamically modify break behavior while ensuring that styles remain consistent across different content sections.

Accessibility Considerations

Enhance Readability and Navigability

Content readability is a key consideration when using break-before-*. Uncontrolled page breaks can disrupt the logical flow of text, making it harder for users—especially those with cognitive disabilities—to follow content. Ensuring that page breaks align with natural content divisions, such as heading transitions or major sections, improves accessibility.

When working with paginated layouts, it is important to maintain visual and contextual continuity between sections. For instance, avoid breaking inline content like lists or tables unnecessarily, as this can hinder comprehension. Instead, focus on breaking before significant headings or groups of related elements.

Support Accessible Interactive Elements

When applying break-before-* to components that contain interactive elements, such as buttons, forms, or navigation links, consider how breaks impact usability. For instance, splitting an interactive form across a forced break can disrupt the user experience, making it harder to complete actions efficiently.

To enhance accessibility, avoid using break-before-* in ways that fragment interactive workflows. If a section contains form inputs or navigation items, ensure that breaks do not separate related components.