A TailwindCSS plugin for breaking out of containers.
npm install tailwind-container-break-outThis is a TailwindCSS plugin that is used to 'break' child elements out of the Tailwind .container class. It works with any container padding customisations or custom breakpoints that are set within your tailwind.config.js.
For best results, set your .container to center mode in your tailwind.config.js, or use mx-auto whenever you use the .container class.
The m{l|r|x}-break-out and p{l|r|x}-break-out classes can be used anywhere inside of a container, but for the most reliable results, apply them to a direct child of .container.
These classes are simple utilities that calculate the negative margins (and inner padding, where required) needed for an element to 'break out' of the container at each responsive break point - they do not account for any extra padding or margins that have been added to your markup.
npm i tailwind-container-break-out
For best browser compatibility that combats varying scrollbar behaviour, also install Set Scrollbar Width and run setScrollbarWidth() on app mount
npm i set-scrollbar-width
``
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
padding: '1rem'
},
},
plugins: [require('tailwind-container-break-out')]
};
`
- Full width break out
` This whole div will expand beyond the container on both the left and right.`
This content is in a container

- Break out on one side only
` This div will expand beyond the container on the right hand side.`
This content is in a container, and sits on the left side of the grid.

- Break out on one side only, with p{l|r|x}-break-out classes to keep inner content in line with .container
` The background color will break out of the .container This div will expand beyond the container on the right hand side.
This content is in a container, and sits on the left side of the grid.
but this text will align to the .container edge.
Examples
!Tailwind Container Break Out Examples
Working example with NextJS
See working example here.
---
⚠️ A note on browser compatibility
This package may produce unintented scrollbar behaviour in some browsers, and so it is encouraged to use alongside this package https://github.com/LucidNinja/set-scrollbar-width, in order to set the scrollbar width as the --twcb-scrollbar-width` CSS variable. By default, this is set as 0px, but should be overriden using this package or Javascript in the framework of your choosing.