Tailwind CSS - Break Before

Previous
Quiz
Next

Tailwind CSS break-before is a utility class that provides control to force a column break or page break before an element.

Tailwind CSS Break Before Classes

The list of Tailwind CSS Break Before Classes that provides an effective way of element alignment.

Class CSS Properties
break-before-auto break-before: auto;
break-before-avoid break-before: avoid;
break-before-all break-before: all;
break-before-avoid-page break-before: avoid-page;
break-before-page break-before: page;
break-before-left break-before: left;
break-before-right break-before: right;
break-before-column break-before: column;

Functionality of Tailwind CSS Break Before Classes

  • break-before-auto: This class replaces the CSS break-before: auto; property. It has the default behavior that it will automatically determine the break.
  • break-before-avoid: This class replaces the CSS break-before: avoid; property, which mainly focuses on avoiding break before an element.
  • break-before-all: It replaces CSS break-before: all; property ensures applying break before all elements.
  • break-before-avoid-page: It replaces CSS break-before: avoid-page; the property ensures avoiding the page break before the element.
  • break-before-page: It replaces CSS break-before: page; property ensures applying page break before the element.
  • break-before-left: It replaces the CSS break-before: left; property that applies break before the element, ensuring it will start from the left.
  • break-before-right: It replaces the CSS break-before: right; property that applies break before the element, ensuring it will start from the right.
  • break-before-column: It replaces CSS break-before: column; ensures applying column break before the element.

Tailwind CSS Break Before Examples

Below example will illustrate the Tailwind CSS break before classes.

Example 1

The following example is demonstrating the use of break-before-auto, break-before-avoid, break-before-all, break-before-avoid-page 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 Before
    </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>
    
  <!-- Section with break-before-auto -->
  <div class="p-4 mb-4
              bg-gray-100">
    <h2 class="text-lg 
               font-semibold">
        Section 1: Break Before Auto
    </h2>
    <p class="break-before-auto">
      This section uses the `break-before-auto` class. The browser will
      automatically determine whether a page break should occur before
      this element.
    </p>
  </div>

  <!-- Section with break-before-avoid -->
  <div class="p-4 mb-4
              bg-gray-200">
    <h2 class="text-lg 
               font-semibold">
        Section 2: Break Before Avoid
    </h2>
    <p class="break-before-avoid">
      This section uses the `break-before-avoid` class. A page break
      will be avoided before this element if possible.
    </p>
  </div>

  <!-- Section with break-before-all -->
  <div class="p-4 mb-4
              bg-gray-300">
    <h2 class="text-lg 
               font-semibold">
        Section 3: Break Before All
    </h2>
    <p class="break-before-all">
      This section uses the `break-before-all` class. A break will
      always occur before this element.
    </p>
  </div>

  <!-- Section with break-before-avoid-page -->
  <div class="p-4 mb-4 
              bg-gray-400">
    <h2 class="text-lg 
               font-semibold">
        Section 4: Break Before Avoid Page
    </h2>
    <p class="break-before-avoid-page">
      This section uses the `break-before-avoid-page` class. A page
      break will be avoided before this element, unless it is
      unavoidable to do so.
    </p>
  </div>
  <script>
        function printPage() {
            window.print();
        }
  </script>
</body>
</html>

Example 2

The following example is demonstrating the use of break-before-page, break-before-left, break-before-right, break-before-column classes.

<!DOCTYPE html> 
<html> 
<head>
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <p class="text-3xl">
        Tailwind CSS Break Before
    </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>
    
  <!-- Section with break-before-page -->
  <div class="p-4 mb-4
              bg-gray-100">
    <h2 class="text-lg 
               font-semibold">
        Section 1: Break Before Page
    </h2>
    <p class="break-before-page">
      This section uses the `break-before-page` class. A page break will
      occur before this element.
    </p>
  </div>

  <!-- Section with break-before-left -->
  <div class="p-4 mb-4
              bg-gray-200">
    <h2 class="text-lg 
               font-semibold">
        Section 2: Break Before Left
    </h2>
    <p class="break-before-left">
      This section uses the `break-before-left` class. A break will
      occur before this element to ensure the content starts on the left
      page of a spread.
    </p>
  </div>

  <!-- Section with break-before-right -->
  <div class="p-4 mb-4
              bg-gray-300">
    <h2 class="text-lg 
               font-semibold">
        Section 3: Break Before Right
    </h2>
    <p class="break-before-right">
      This section uses the `break-before-right` class. A break will
      occur before this element to ensure the content starts on the
      right page of a spread.
    </p>
  </div>

  <!-- Section with break-before-column -->
  <div class="p-4 mb-4 
              bg-gray-400
              columns-2">
    <h2 class="text-lg 
               font-semibold">
        Section 4: Break Before Column
    </h2>
    <p>
            The content after this element will break because next
            element has break-before-column class.
        </p>
        <p class="break-before-column">
            This is the broken content that has been broken due to break
            -before-column class.
        </p>
  </div>
  <script>
        function printPage() {
            window.print();
        }
  </script>
</body> 
</html>
Print Page
Previous
Next
Advertisements