Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Break Inside

Tailwind CSS break-inside is a utility class that provides a way through how a column or page should break within an element.

Tailwind CSS Break Inside Classes

The following is the list of Tailwind CSS Break-Inside Classes, which helps in effective alignment of content within an element.

Class	CSS Properties
break-inside-auto	break-inside: auto;
break-inside-avoid	break-inside: avoid;
break-inside-avoid-page	break-inside: avoid-page;
break-inside-avoid-column	break-inside: avoid-column;

Functionality of Tailwind CSS Break Inside Classes

break-inside-auto: This class replaces the CSS break-inside: auto; property. It has the default behavior that it will automatically determine the break within an element.
break-inside-avoid: This class replaces the CSS break-inside: avoid; property which mainly focusses on avoiding breaks within an element.
break-inside-avoid-page: This class replaces CSS break-inside: avoid-page; the property ensures avoiding the page break within an element.
break-inside-avoid-column This class replaces CSS break-inside: avoid-column; the property ensures applying column break within an element.

Tailwind CSS Break Inside Examples

Below examples will illustrate the Tailwind CSS break-inside classes utility.

Example 1

The following example is demonstrating the use of break-inside-auto & break-inside-avoid classes.

 <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <p class="text-3xl"> Tailwind CSS Break Inside </p> <p> Click on below button to see the effect when you print the page. </p> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 my-2 rounded" onclick="printPage()"> Print Page </button> <!-- Container with break-inside-auto --> <div class="p-4 mb-4 bg-gray-100"> <h2 class="text-lg font-semibold"> Break Inside Auto </h2> <div class="break-inside-auto"> <p> This container uses the `break-inside-auto` class. The browser will automatically determine where breaks should occur inside this container. </p> </div> </div> <!-- Container with break-inside-avoid --> <div class="p-4 mb-4 bg-gray-200"> <h2 class="text-lg font-semibold"> Break Inside Avoid </h2> <div class="break-inside-avoid"> <p> This container uses the `break-inside-avoid` class. Breaks inside this container will be avoided, keeping the content together. </p> </div> </div> </body> </html>

Example 2

The following example is demonstrating the use of break-inside-avoid-page & break-inside-avoid-column classes.

 <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-4"> <p class="text-3xl"> Tailwind CSS Break Inside </p> <p> Click on below button to see the effect when you print the page. </p> <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 my-2 rounded" onclick="printPage()"> Print Page </button> <!-- Container with break-inside-avoid-page --> <div class="p-4 mb-4 bg-gray-300"> <h2 class="text-lg font-semibold"> Break Inside Avoid Page </h2> <div class="break-inside-avoid-page"> <p> This container uses the `break-inside-avoid-page` class. Page breaks inside this container will be avoided. </p> </div> </div> <!-- Container with break-inside-avoid-column --> <div class="p-4 mb-4 bg-gray-400"> <h2 class="text-lg font-semibold"> Break Inside Avoid Column </h2> <div class="columns-2"> <!-- Column 1 --> <div> <!-- A list of items that should not break inside the column --> <ul class="break-inside-avoid-column"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> </div> <!-- Column 2 --> <div> <!-- Some other content --> <p>Simply Easy Learning</p> </div> </div> <script> function printPage() { window.print(); } </script> </body> </html>

Print Page