Tailwind CSS

Container Bleed Plugin

View on GitHub

This plugin generates utilities classes to bleed into container padding and margin at each screen breakpoint. There are no screen-specific variants, just simple classes that will automatically account for padding changes at different screen sizes. Padding refers to the interior space between the container edge and its content; margin refers to the exterior space between the container edge and the browser window.

This demo has the following container configuration:

container: {
  center: true,
  padding: {
    DEFAULT: '1rem',
    md: '2rem',
    lg: '4rem'
  }
}

Note: The default xl and 2xl screen breakpoints are disabled in this demo.

Container

.container
No Bleed

Bleed

Uses a negative margin to bleed into the container padding and margin. Then applies the container padding and margin back to itself as padding so the content remains aligned. Use the classes in parentheses to apply the negative margin or padding individually.

Bleed Left & Right
.bx-container ( .-mx-container .px-container )
Bleed Left
.bl-container ( .-ml-container .pl-container )
Bleed Right
.br-container ( .-mr-container .pr-container )

Bleed – Padding Only

Uses a negative margin to bleed into the container padding. Then applies the container padding back to itself as padding so the content remains aligned. Use the classes in parentheses to apply the negative margin or padding individually.

Bleed Left & Right – Padding Only
.bx-container-padding ( .-mx-container-padding .px-container-padding )
Bleed Left – Padding-Only
.bl-container-padding ( .-ml-container-padding .pl-container-padding )
Bleed Right – Padding-Only
.br-container-padding ( .-mr-container-padding .pr-container-padding )

Bleed – Margin Only

Uses a negative margin to bleed into the container margin. Then applies the container margin back to itself as padding so the content remains aligned. Use the classes in parentheses to apply the negative margin or padding individually.

Bleed Left & Right – Margin Only
.bx-container-margin ( .-mx-container-margin .px-container-margin )
Bleed Left – Margin-Only
.bl-container-margin ( .-mx-container-margin .px-container-margin )
Bleed Right – Margin-Only
.br-container-margin ( .-mx-container-margin .px-container-margin )

More Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor mauris, ultrices quis lacinia eu, aliquam eu odio. Nulla facilisi. Fusce accumsan scelerisque felis, et efficitur elit. Sed gravida nunc congue neque.

Full Bleed

This section has the class .bx-container applied to break out of the container to the edges of the browser window. The padding re-applied to the section keeps the content width consistent with the rest of the container.

Full Bleed – Padding Only

This section has the class .bx-container-padding applied to break out of the container padding only. The padding re-applied to the section keeps the content width consistent with the rest of the container.