Tailwind Container Break Out

This 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.

Installation

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

Quick Start

$3

``
// tailwind.config.js

module.exports = {
theme: {
container: {
center: true,
padding: '1rem'
},
},
plugins: [require('tailwind-container-break-out')]
};

`

$3

- Full width break out

`



`

- Break out on one side only

`



`

- Break out on one side only, with p{l|r|x}-break-out classes to keep inner content in line with .container

`



`

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.