
- Tailwind CSS - Home
- Tailwind CSS - Roadmap
- Tailwind CSS - Introduction
- Tailwind CSS - Installation
- Tailwind CSS - Editor Setup
- Tailwind CSS - Utility-First Fundamentals
- Tailwind CSS - Hover, Focus, and Other States
- Tailwind CSS - Responsive Design
- Tailwind CSS - Dark Mode
- Tailwind CSS - Reusing Styles
- Tailwind CSS - Adding Custom Styles
- Tailwind CSS - Functions & Directives
- Tailwind CSS - Customization
- Tailwind CSS - Configuration
- Tailwind CSS - Content Configuration
- Tailwind CSS - Theme Configuration
- Tailwind CSS - Customizing Screens
- Tailwind CSS - Customizing Colors
- Tailwind CSS - Customizing Spacing
- Tailwind CSS - Plugins
- Tailwind CSS - Presets
- Tailwind CSS - Base Styles
- Tailwind CSS - Preflight
- Tailwind CSS - Layout
- Tailwind CSS - Aspect Ratio
- Tailwind CSS - Container
- Tailwind CSS - Columns
- Tailwind CSS - Break After
- Tailwind CSS - Break Before
- Tailwind CSS - Break Inside
- Tailwind CSS - Box Decoration Break
- Tailwind CSS - Box Sizing
- Tailwind CSS - Display
- Tailwind CSS - Floats
- Tailwind CSS - Clear
- Tailwind CSS - Isolation
- Tailwind CSS - Object Fit
- Tailwind CSS - Object Position
- Tailwind CSS - Overflow
- Tailwind CSS - Overscroll Behavior
- Tailwind CSS - Position
- Tailwind CSS - Top / Right / Bottom / Left
- Tailwind CSS - Visibility
- Tailwind CSS - Z-Index
- Tailwind CSS - Flexbox & Grid
- Tailwind CSS - Flex Basis
- Tailwind CSS - Flex Direction
- Tailwind CSS - Flex Wrap
- Tailwind CSS - Flex
- Tailwind CSS - Flex Grow
- Tailwind CSS - Flex Shrink
- Tailwind CSS - Order
- Tailwind CSS - Grid Template Columns
- Tailwind CSS - Grid Column Start / End
- Tailwind CSS - Grid Template Rows
- Tailwind CSS - Grid Row Start / End
- Tailwind CSS - Grid Auto Flow
- Tailwind CSS - Grid Auto Columns
- Tailwind CSS - Grid Auto Rows
- Tailwind CSS - Gap
- Tailwind CSS - Justify Content
- Tailwind CSS - Justify Items
- Tailwind CSS - Justify Self
- Tailwind CSS - Align Content
- Tailwind CSS - Align Items
- Tailwind CSS - Align Self
- Tailwind CSS - Place Content
- Tailwind CSS - Place Items
- Tailwind CSS - Place Self
- Tailwind CSS - Spacing
- Tailwind CSS - Padding
- Tailwind CSS - Margin
- Tailwind CSS - Space Between
- Tailwind CSS - Sizing
- Tailwind CSS - Width
- Tailwind CSS - Min-Width
- Tailwind CSS - Max-Width
- Tailwind CSS - Height
- Tailwind CSS - Min-Height
- Tailwind CSS - Max-Height
- Tailwind CSS - Size
- Tailwind CSS - Typography
- Tailwind CSS - Font Family
- Tailwind CSS - Font Size
- Tailwind CSS - Font Smoothing
- Tailwind CSS - Font Style
- Tailwind CSS - Font Weight
- Tailwind CSS - Font Variant Numeric
- Tailwind CSS - Letter Spacing
- Tailwind CSS - Line Clamp
- Tailwind CSS - Line Height
- Tailwind CSS - List Style Image
- Tailwind CSS - List Style Position
- Tailwind CSS - List Style Type
- Tailwind CSS - Text Align
- Tailwind CSS - Text Color
- Tailwind CSS - Text Decoration
- Tailwind CSS - Text Decoration Color
- Tailwind CSS - Text Decoration Style
- Tailwind CSS - Text Decoration Thickness
- Tailwind CSS - Text Underline Offset
- Tailwind CSS - Text Transform
- Tailwind CSS - Text Overflow
- Tailwind CSS - Text Wrap
- Tailwind CSS - Text Indent
- Tailwind CSS - Vertical Align
- Tailwind CSS - Whitespace
- Tailwind CSS - Word Break
- Tailwind CSS - Hyphens
- Tailwind CSS - Content
- Tailwind CSS - Backgrounds
- Tailwind CSS - Background Attachment
- Tailwind CSS - Background Clip
- Tailwind CSS - Background Color
- Tailwind CSS - Background Origin
- Tailwind CSS - Background Position
- Tailwind CSS - Background Repeat
- Tailwind CSS - Background Size
- Tailwind CSS - Background Image
- Tailwind CSS - Gradient Color Stops
- Tailwind CSS - Borders
- Tailwind CSS - Border Radius
- Tailwind CSS - Border Width
- Tailwind CSS - Border Color
- Tailwind CSS - Border Style
- Tailwind CSS - Divide Width
- Tailwind CSS - Divide Color
- Tailwind CSS - Divide Style
- Tailwind CSS - Outline Width
- Tailwind CSS - Outline Color
- Tailwind CSS - Outline Style
- Tailwind CSS - Outline Offset
- Tailwind CSS - Ring Width
- Tailwind CSS - Ring Color
- Tailwind CSS - Ring Offset Width
- Tailwind CSS - Ring Offset Color
- Tailwind CSS - Effects
- Tailwind CSS - Box Shadow
- Tailwind CSS - Box Shadow Color
- Tailwind CSS - Opacity
- Tailwind CSS - Mix Blend Mode
- Tailwind CSS - Background Blend Mode
- Tailwind CSS - Filters
- Tailwind CSS - Blur
- Tailwind CSS - Brightness
- Tailwind CSS - Contrast
- Tailwind CSS - Drop Shadow
- Tailwind CSS - Grayscale
- Tailwind CSS - Hue Rotate
- Tailwind CSS - Invert
- Tailwind CSS - Saturate
- Tailwind CSS - Sepia
- Tailwind CSS - Backdrop Blur
- Tailwind CSS - Backdrop Brightness
- Tailwind CSS - Backdrop Contrast
- Tailwind CSS - Backdrop Grayscale
- Tailwind CSS - Backdrop Hue Rotate
- Tailwind CSS - Backdrop Invert
- Tailwind CSS - Backdrop Opacity
- Tailwind CSS - Backdrop Saturate
- Tailwind CSS - Backdrop Sepia
- Tailwind CSS - Tables
- Tailwind CSS - Border Collapse
- Tailwind CSS - Border Spacing
- Tailwind CSS - Table Layout
- Tailwind CSS - Caption Side
- Tailwind CSS - Transitions & Animation
- Tailwind CSS - Transition Property
- Tailwind CSS - Transition Duration
- Tailwind CSS - Transition Timing Function
- Tailwind CSS - Transition Delay
- Tailwind CSS - Animation
- Tailwind CSS - Transform
- Tailwind CSS - Scale
- Tailwind CSS - Rotate
- Tailwind CSS - Translate
- Tailwind CSS - Skew
- Tailwind CSS - Transform Origin
- Tailwind CSS - Interactivity
- Tailwind CSS - Accent Color
- Tailwind CSS - Appearance
- Tailwind CSS - Cursor
- Tailwind CSS - Caret Color
- Tailwind CSS - Pointer Events
- Tailwind CSS - Resize
- Tailwind CSS - Scroll Behavior
- Tailwind CSS - Scroll Margin
- Tailwind CSS - Scroll Padding
- Tailwind CSS - Scroll Snap Align
- Tailwind CSS - Scroll Snap Stop
- Tailwind CSS - Scroll Snap Type
- Tailwind CSS - Touch Action
- Tailwind CSS - User Select
- Tailwind CSS - Will Change
- Tailwind CSS - SVG
- Tailwind CSS - Fill
- Tailwind CSS - Stroke
- Tailwind CSS - Stroke Width
- Tailwind CSS - Accessibility
- Tailwind CSS - Screen Readers
- Tailwind CSS - Forced Color Adjust
- Tailwind CSS - Bonus
- Tailwind CSS - Using with Preprocessors
- Tailwind CSS - Optimizing for Production
- Tailwind CSS - References
- Tailwind CSS - Core Concepts
- Tailwind CSS - Customization
- Tailwind CSS - Layout
- Tailwind CSS - Flexbox & Grid
- Tailwind CSS - Spacing
- Tailwind CSS - Sizing
- Tailwind CSS - Typography
- Tailwind CSS - Backgrounds
- Tailwind CSS - Borders
- Tailwind CSS - Effects
- Tailwind CSS - Filters
- Tailwind CSS - Tables
- Tailwind CSS - Transitions & Animation
- Tailwind CSS - Transforms
- Tailwind CSS - Interactivity
- Tailwind CSS - Resources
- Tailwind CSS - Discussion
- Tailwind CSS - Useful Resources
Tailwind CSS - Break Before
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>