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

Tailwind CSS - Break Inside

Quiz

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