This plugin generates utilities classes to bleed into container padding and margin at each screen breakpoint.
<main class="container">
<section class="bx-container">
This element breaks out of the container to the edges of the browser
window. Padding is applied so this content will remain inline with other
container content.
</section>
<section class="bx-container-padding">
This element breaks out of the container padding only. Padding is applied
so this content will remain inline with other container content.
</section>
<!-- See more utilities in demo -->
</main>Install the plugin from npm:
# Using npm
npm install --save-dev tailwindcss-container-bleed
# Using Yarn
yarn add -D tailwindcss-container-bleedThen add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('tailwindcss-container-bleed'),
// ...
],
}This plugin works in conjunction with the native container component and its horizontal padding options. There are no additional options to be configured in the theme.
There are, however, a few options that can be configured when the plugin is included:
// tailwind.config.js
module.exports = {
plugins: [
require('tailwindcss-container-bleed', {
// Defaults
rootSelector: ':root',
screenWidthVar: '--screen-width',
screenWidthDefault: theme('width.screen'),
currentScreenVar: '--current-screen',
currentScreenDefault: screenWidthDefault,
paddingVar: '--container-padding'
})
]
}Notes:
- Requires Tailwind CSS v1.3+
- Fully works best when
container.center = true - Relies on CSS custom properties
The following utility classes are generated. They can also be used with @apply.
The bleed classes are a combination of the respective negative margin and padding utilites below. For example, .bx-container is equal to .-mx-container .px-container.
.bl-container
.br-container
.bx-container
.b-container-padding
.bl-container-padding
.br-container-padding
.bt-container-padding
.bb-container-padding
.bx-container-padding
.by-container-padding
.bl-container-margin
.br-container-margin
.bx-container-margin
.-ml-container
.-mr-container
.-mx-container
.-m-container-padding
.-ml-container-padding
.-mr-container-padding
.-mt-container-padding
.-mb-container-padding
.-mx-container-padding
.-my-container-padding
.-ml-container-margin
.-mr-container-margin
.-mx-container-margin
.pl-container
.pr-container
.px-container
.p-container-padding
.pl-container-padding
.pr-container-padding
.pt-container-padding
.pb-container-padding
.px-container-padding
.py-container-padding
.pl-container-margin
.pr-container-margin
.px-container-margin