Tailwind CSS Break After

Break After controls how a document or container breaks after a specific element (for instance, a page break in printed documents or a column break in multicol layouts). Tailwind’s utility classes simplify the process of applying these break rules, offering concise and consistent syntaxes that can integrate seamlessly with responsive design or state-based interactions.

This guide delves into using these utilities, explaining how to use them in various contexts to achieve precise control over content flow.

Class	Properties	Example
`break-after-auto`	`break-after: auto;`	`<div className="break-after-auto"></div>`
`break-after-avoid`	`break-after: avoid;`	`<div className="break-after-avoid"></div>`
`break-after-all`	`break-after: all;`	`<div className="break-after-all"></div>`
`break-after-avoid-page`	`break-after: avoid-page;`	`<div className="break-after-avoid-page"></div>`
`break-after-page`	`break-after: page;`	`<div className="break-after-page"></div>`
`break-after-left`	`break-after: left;`	`<div className="break-after-left"></div>`
`break-after-right`	`break-after: right;`	`<div className="break-after-right"></div>`
`break-after-column`	`break-after: column;`	`<div className="break-after-column"></div>`

Overview of Break After

Adding the Break After

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

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

This is a live editor. Play around with it!

export default function StructuredLayout() {
  return (
    <div className="h-screen w-screen p-8">
      {/* Section 1: Includes an image and text */}
      <div className="bg-white p-6 mb-4">
        <img 
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf" 
          alt="Sample" 
          className="rounded mb-4"
        />
        <h2 className="text-2xl font-bold">
          Section One
        </h2>
        <p className="mt-2">
          This area demonstrates the primary content for the first section. 
          We might want a break after this section if we are preparing a layout 
          that transitions into a new part of the document (e.g., a new page in 
          a print layout).
        </p>
      </div>

      {/* Applying the break-after behavior */}
      <div className="break-after-page bg-white p-6 mb-4">
        <h2 className="text-2xl font-semibold">
          Important Layout Transition
        </h2>
        <p className="mt-2">
          This element is configured to enforce a page break immediately after it, 
          ensuring subsequent content appears on a fresh page in print or column 
          based scenarios.
        </p>
      </div>

      {/* Following block should appear on the next page in print or subsequent column */}
      <div className="bg-white p-6">
        <h2 className="text-2xl font-semibold">
          Next Segment
        </h2>
        <p className="mt-2">
          After the forced break, this section will begin independently, typically 
          at the top of a new column or page when printed.
        </p>
      </div>
    </div>
  )
}

States and Responsiveness

While applying break-after classes is helpful in a static context, modern web development often requires handling dynamic states (like hover or focus) and varying screen sizes. Tailwind CSS provides state and responsive variants to handle these scenarios.

Hover and Focus States

Even though break-after is often considered in the context of printed or multi-column layouts, you can occasionally use it for interactive states. For example, you might want to force a column break after an element only when a user interacts with it (e.g., on hover or focus) in a multi-column layout.

In Tailwind CSS, you can achieve this by prepending state modifiers to the utility class. Ensure your element is part of a multi-column layout for break-after to have an effect.

This is a live editor. Play around with it!

export default function InteractiveBreakLayout() {
  return (
    <div className="columns-1 h-screen w-screen p-6">
      {/* Breaks on hover */}
      <div className="hover:break-after-column bg-white transition-all">
        <h2 className="text-2xl font-semibold">
          Hover-Enforced Break
        </h2>
        <p className="">
          When you hover over this container, it sets a column break immediately 
          after. This might be used for an experimental design approach.
        </p>
      </div>

      {/* Content that flows after the potential break */}
      <div className="bg-white pt-6">
        <h2 className="text-xl font-medium">
          Subsequent Content
        </h2>
        <p>
          If hovered above, the preceding element forces this block to appear 
          in a new column, highlighting how hover states can dynamically adjust 
          layout flows.
        </p>
      </div>
    </div>
  )
}

With the hover:break-after-column, the browser attempts to push the next block into the next column in a multi-column context whenever the mouse hovers over the container. Although this is a niche scenario, it showcases how you can creatively combine Tailwind’s state variants with break-after to adapt layout structures.

Breakpoint Modifiers

Screen size can significantly impact decisions about content breaks. On mobile screens, you typically want content to flow seamlessly without abrupt pagination or column transitions, but on larger screens, breaks can enhance clarity.

Tailwind provides breakpoint variants to apply break-after utilities conditionally, ensuring a more fluid, device-adaptive layout.

This is a live editor. Play around with it!

export default function ResponsiveBreaks() {
  return (
    <div className="columns-1 h-screen w-screen p-8">
      {/* Default no break applied */}
      <div className="bg-white p-6 mb-4">
        <h2 className="text-2xl font-bold">
          Universal Segment
        </h2>
        <p className="mt-2">
          This container does not enforce a page or column break on any device. 
          It's a standard block that flows naturally.
        </p>
      </div>

      {/* Add break on medium screens and above */}
      <div className="md:break-after-column bg-white p-6 mb-4">
        <h2 className="text-2xl font-semibold">
          Medium and Larger Break
        </h2>
        <p className="mt-2">
          On screens medium size or larger, this will force a column break. 
          On smaller devices, the break is not applied, allowing continuous 
          scrolling and a more compact layout.
        </p>
      </div>

      {/* Break on large screens and above */}
      <div className="lg:break-after-page bg-white p-6 mb-4">
        <h2 className="text-2xl font-semibold">
          Page Break on Large Screens
        </h2>
        <p className="mt-2">
          This class enforces a page break on large screens. When printing or 
          viewing on expansive devices, the subsequent content shifts to a 
          new page or region. This allows precise control over layout flow 
          for specific device widths.
        </p>
      </div>

      {/* Following block for demonstration */}
      <div className="bg-white p-6">
        <img 
          src="https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf" 
          alt="Sample" 
          className="rounded mb-4"
        />
        <h2 className="text-xl font-medium">
          Continuation
        </h2>
        <p className="mt-2">
          This content comes after any enforced break, concluding how you can use 
          responsive conditions to tailor breakpoints for different use cases.
        </p>
      </div>
    </div>
  )
}

Real World Examples

Product Category Cards

This example shows product category cards where each columns breaks after 3 items for optimal layout.

This is a live editor. Play around with it!

export default function CategoryCards() {
  const categories = [
    {
      name: "Electronics",
      src: "https://images.unsplash.com/photo-1498049794561-7780e7231661",
      alt: "Electronics category",
      itemCount: 1250
    },
    {
      name: "Fashion",
      src: "https://images.unsplash.com/photo-1445205170230-053b83016050",
      alt: "Fashion category",
      itemCount: 3420
    },
    {
      name: "Home & Garden",
      src: "https://images.unsplash.com/photo-1484154218962-a197022b5858",
      alt: "Home and Garden category",
      itemCount: 892
    },
    {
      name: "Sports",
      src: "https://images.unsplash.com/photo-1461896836934-ffe607ba8211",
      alt: "Sports category",
      itemCount: 647
    },
    {
      name: "Books",
      src: "https://images.unsplash.com/photo-1495446815901-a7297e633e8d",
      alt: "Books category",
      itemCount: 2156
    },
    {
      name: "Toys",
      src: "https://images.unsplash.com/photo-1558877385-81a1c7e67d72",
      alt: "Toys category",
      itemCount: 945
    }
  ];

  return (
    <div className="columns-1 p-6">
      {categories.map((category, index) => (
        <div 
          key={category.name}
          className={`p-4 rounded-lg shadow-md ${(index + 1) % 3 === 0 ? 'break-after-column' : ''}`}
        >
          <img 
            src={category.src} 
            alt={category.alt}
            className="w-full h-48 object-cover rounded-md"
          />
          <h3 className="text-xl font-bold mt-2">{category.name}</h3>
          <p className="text-gray-600">{category.itemCount} items</p>
        </div>
      ))}
    </div>
  );
}

Blog Post Content

This example demonstrates a blog post layout with page breaks after each major content block.

This is a live editor. Play around with it!

export default function BlogPost() {
  const blogContent = {
    title: "The Future of Web Development",
    sections: [
      {
        heading: "Introduction",
        content: "The landscape of web development is constantly evolving...",
        src: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6",
        alt: "Web Development Introduction"
      },
      {
        heading: "Modern Frameworks",
        content: "Today's frameworks offer unprecedented capabilities...",
        src: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb",
        alt: "Modern Frameworks"
      },
      {
        heading: "Best Practices",
        content: "Following established patterns ensures maintainable code...",
        src: "https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2",
        alt: "Development Best Practices"
      },
      {
        heading: "Performance Optimization",
        content: "Optimizing web applications is crucial for user experience...",
        src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
        alt: "Performance Optimization"
      },
      {
        heading: "Security Considerations",
        content: "Security should be a primary concern in modern web development...",
        src: "https://images.unsplash.com/photo-1555949963-aa79dcee981c",
        alt: "Security in Web Development"
      },
      {
        heading: "Future Trends",
        content: "Emerging technologies are shaping the future of web development...",
        src: "https://images.unsplash.com/photo-1550439062-609e1531270e",
        alt: "Future Web Development Trends"
      }
    ]
  };

  return (
    <article className="max-w-3xl mx-auto p-6">
      <h1 className="text-4xl font-bold mb-8">{blogContent.title}</h1>
      {blogContent.sections.map((section, index) => (
        <section 
          key={section.heading}
          className={`mb-12 ${index < blogContent.sections.length - 1 ? 'break-after-page' : ''}`}
        >
          <img 
            src={section.src}
            alt={section.alt}
            className="w-full h-64 object-cover rounded-lg mb-4"
          />
          <h2 className="text-2xl font-semibold mb-4">{section.heading}</h2>
          <p className="text-gray-700 leading-relaxed">{section.content}</p>
        </section>
      ))}
    </article>
  );
}

Team Member Directory with Column Breaks

This example shows a team directory with column breaks.

This is a live editor. Play around with it!

export default function TeamDirectory() {
  const teamMembers = [
    {
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson",
      department: "Executive"
    },
    {
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen",
      department: "Technology"
    },
    {
      name: "Emily Rodriguez",
      role: "Design Director",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Rodriguez",
      department: "Design"
    },
    {
      name: "David Kim",
      role: "Senior Developer",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "David Kim",
      department: "Engineering"
    },
    {
      name: "Lisa Thompson",
      role: "Marketing Lead",
      src: "https://images.unsplash.com/photo-1517841905240-472988babdf9",
      alt: "Lisa Thompson",
      department: "Marketing"
    },
    {
      name: "James Wilson",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "James Wilson",
      department: "Product"
    }
  ];

  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold mb-8">Team Directory</h1>
      <div className="columns-1 gap-8">
        {teamMembers.map((member, index) => (
          <div 
            key={member.name}
            className={`mb-6 p-4 bg-white rounded-lg shadow-md ${
              index % 2 === 1 ? 'break-after-column' : ''
            }`}
          >
            <img 
              src={member.src}
              alt={member.alt}
              className="w-full h-48 object-cover rounded-md mb-4"
            />
            <h3 className="text-xl font-semibold">{member.name}</h3>
            <p className="text-gray-600">{member.role}</p>
            <p className="text-gray-500 text-sm">{member.department}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Print-friendly Invoice with Page Breaks

This example shows an invoice layout with strategic page breaks for printing.

This is a live editor. Play around with it!

export default function PrintableInvoice() {
  const invoiceData = {
    invoiceNumber: "INV-2023-001",
    date: "2023-08-15",
    items: [
      { id: 1, name: "Web Development Services", hours: 40, rate: 150 },
      { id: 2, name: "UI/UX Design", hours: 25, rate: 125 },
      { id: 3, name: "Content Strategy", hours: 15, rate: 100 },
      { id: 4, name: "SEO Optimization", hours: 20, rate: 90 },
      { id: 5, name: "Performance Testing", hours: 10, rate: 110 },
      { id: 6, name: "Project Management", hours: 30, rate: 85 }
    ],
    client: {
      name: "Tech Solutions Inc.",
      address: "123 Business Ave",
      city: "San Francisco, CA 94105"
    }
  };

  return (
    <div className="max-w-4xl mx-auto p-8 bg-white">
      <div className="break-after-page">
        <header className="mb-8">
          <h1 className="text-3xl font-bold">Invoice</h1>
          <p>Invoice #: {invoiceData.invoiceNumber}</p>
          <p>Date: {invoiceData.date}</p>
        </header>

        <div className="mb-8">
          <h2 className="text-xl font-semibold mb-2">Bill To:</h2>
          <p>{invoiceData.client.name}</p>
          <p>{invoiceData.client.address}</p>
          <p>{invoiceData.client.city}</p>
        </div>
      </div>

      <div className="break-after-page">
        <table className="w-full mb-8">
          <thead>
            <tr className="border-b-2">
              <th className="text-left p-2">Service</th>
              <th className="text-right p-2">Hours</th>
              <th className="text-right p-2">Rate</th>
              <th className="text-right p-2">Amount</th>
            </tr>
          </thead>
          <tbody>
            {invoiceData.items.map(item => (
              <tr key={item.id} className="border-b">
                <td className="p-2">{item.name}</td>
                <td className="text-right p-2">{item.hours}</td>
                <td className="text-right p-2">${item.rate}</td>
                <td className="text-right p-2">${item.hours * item.rate}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

Product Catalog

This example shows a product catalog that avoids any breaks by using the break-after-avoid property.

This is a live editor. Play around with it!

const ProductCatalog = () => {
  const products = [
    {
      name: "Ergonomic Office Chair",
      price: 299.99,
      src: "https://images.unsplash.com/photo-1592078615290-033ee584e267",
      alt: "Black ergonomic office chair",
      rating: 4.8,
      category: "Furniture"
    },
    {
      name: "Wireless Noise-Canceling Headphones",
      price: 199.99,
      src: "https://images.unsplash.com/photo-1583394838336-acd977736f90",
      alt: "Premium headphones",
      rating: 4.9,
      category: "Electronics"
    },
    {
      name: "Smart Watch Series X",
      price: 349.99,
      src: "https://images.unsplash.com/photo-1544117519-31a4b719223d",
      alt: "Modern smartwatch",
      rating: 4.7,
      category: "Electronics"
    },
    {
      name: "Mechanical Keyboard",
      price: 129.99,
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "RGB mechanical keyboard",
      rating: 4.8,
      category: "Electronics"
    },
    {
      name: "Ultrawide Monitor",
      price: 699.99,
      src: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf",
      alt: "34-inch curved monitor",
      rating: 4.9,
      category: "Electronics"
    }
  ];

  return (
    <div className="columns-1 p-8 bg-gray-50">
      {products.map((product, index) => (
        <div 
          key={index} 
          className="bg-white mt-4 p-6 rounded-xl shadow-sm break-after-avoid"
        >
          <img 
            src={product.src} 
            alt={product.alt} 
            className="w-full h-48 object-cover rounded-lg mb-4"
          />
          <div className="text-sm text-blue-600 mb-2">{product.category}</div>
          <h3 className="text-lg font-semibold mb-2">{product.name}</h3>
          <div className="flex justify-between items-center">
            <span className="text-xl font-bold">${product.price}</span>
            <span className="text-yellow-500">★ {product.rating}</span>
          </div>
          <div className="clear-both" />
        </div>
      ))}
    </div>
  );
};

export default ProductCatalog;

Best Practices

Maintain Design Consistency

Maintaining design consistency is crucial when applying the break-after utility in Tailwind CSS. This utility controls the behavior of block-level elements after a specified element, ensuring that content flows predictably across different layouts. To maintain uniformity, establish guidelines for using break-after-column, break-after-avoid, break-after-page, etc. in similar contexts, such as sections, articles, or print layouts.

For example, consistently applying break-after-page for printable sections ensures a standardized and professional look across all pages. Additionally, document these conventions within your design system or style guide so developers can apply them consistently across projects. Ensure that your designs are predictable and align with user expectations for page and section breaks.

Build Responsive Design

Responsive variants are crucial when building modern user interfaces. Tailwind allows you to prefix responsive modifiers with break-after classes- md:break-after-column, or lg:break-after-page to conditionally apply breaks at certain device widths. This ensures small screen users view content in a more streamlined manner, whereas larger screens may showcase multi-column flows or enforced page breaks for print.

When refining layouts for responsiveness, plan systematically. Start by considering how elements display on the smallest screen size, usually letting them flow naturally. As you move upwards in breakpoints, introduce break-after-column, break-after-page, or other classes to handle wider device contexts or print layouts. This approach respects progressive enhancement principles and helps avoid abrupt changes in user experience.

Accessibility Considerations

Enhance Readability and Navigability

The break-after utility in Tailwind CSS can improve layout structure and content organization, particularly in contexts where logical content divisions are essential, such as print layouts or multi-column designs. By strategically applying break-after, you can create clear and consistent visual divisions that enhance the user experience.

For example, in long-form documents or articles, using break-after-page in print layouts ensures that each section starts on a new page. This helps provide a clear organizational structure for printed content. Similarly, for on-screen navigation, break-after-column can be applied in multi-column layouts to divide content into manageable chunks, preventing visual overwhelm for users.

Ensure Keyboard Accessibility

Keyboard users rely on predictable navigation and logical content flow. Misusing break-after can disrupt this flow, especially when it causes elements to visually shift or creates unexpected jumps for users tabbing through the page.

For example, starting a new column in the middle of a component might confuse users if the focus suddenly moves to another section. To maintain keyboard accessibility, plan how elements appear both visually and in code order. Thoughtful use of break-after ensures a great experience for all users.

Overflow Floats