Add 'full-bleed' or 'breakout' utility.

[VashJuan]

After spending a few days searching, I found this elegant solution to 'breaking out' of whatever container/columns you might be constrained by, and creating a 'full bleed' effect.
https://piccalil.li/blog/creating-a-full-bleed-css-utility/

It's just:

width: 100vw;
margin-left: calc(50% - 50vw);

and by making 50vw smaller (and setting your breakout image/block to 95vw or whatever), you can create variable-width, centered bleeds!

Wouldn't this be a nice addition to TailwindCSS? This seems useful enough to make it broadly available. (Or less nice would just be to put it in the docs/examples somewhere.)

[VashJuan]

The associated issue was closed as 'completed'.

Does this functionality already exist, or is it deemed as something folks 'should know' somehow?

Sorry if I missed something.

[adamwathan]

Hey! Just closed it because this discussion already exists and discussions are the right place for feature requests, we use issues exclusively for bug reports 👍

I think this is probably a bit too opinionated of a utility to add to the framework by default, but you can always add it to your own projects as a custom utility or just use these two existing utilities to create this effect in your markup:

<div class="w-screen ml-[calc(50%-50vw)]">