left-margin calculation seems off for large screen sizes

[arvidlb]

On larger screens the left-margin calculations seem off and on top of that, the left margin gets recalculated for every breakpoint above 1280px.

So on my 2560px wide screen, the left margin from all breakpoints above 1024px are active (1920, 1536, 1280) which leads to an incorrect calculation.

In the gif you can see the purple hero working on a wide screen when I turn off all the left-margin breakpoint calculations above 1024px, then as I make the screen smaller (> 1280px wide), the calculation seems off for the left margin.

[LucidNinja]

Hi @arvidlb - thanks for your clear description! From what I can see, it looks like one of the margins isn't being applied at the same time as the other one, so perhaps you have another margin which is overriding this one? Also, these utilities were made to break out of the TailwindCSC container, which means your parent div should have the container class, and then if you want a single div (like your blue div in the example) to 'break out' of the container, you then apply the mx-break-out (and px-break-out) classes to the direct descendant div.

<div class="container">
  /* Content here is constrained to the width of the container. */

  <div class="mx-break-out">
    /* Content here will break out of the container and become the width of the screen */

  </div>
</div>

[LucidNinja]

@arvidlb - it also looks like you are applying a w-screen class on the same div as the mx-break-out class, which is not necessary, and could even be why things aren't playing nicely, since you are forcing a width, rather than letting the div's width be automatically calculated.

[arvidlb]

Hey @LucidNinja, you're right about the w-screen class. Removing that seems to at least center the div on the page. However, this confuses me a little because removing the w-screen class makes it so that the mx-break-out div is not full screen width anymore and neither does it seem clear to me what exactly defines the width of the element at that point.

EDIT: I've done some testing and it seems as though full-width divs can be achieved by altering the mx-break-out calculation to not be:

calc(-100vw / 2 + {breakpoint} / 2

but:

calc(-100vw / 2 + ({breakpoint} / 2) / 2

Or in other words, by halving the current breakpoint. I've tested this in FireFox and although not perfect (the left margin seems to overflow slightly off the left side of the page at certain breakpoints, causing child elements to be slightly off-center), it does seem to work.

Makes me wonder if it would be possible to have classes specific for full-width divs like .mx-break-out-fw that alters the margin calculation?

EDIT2: Ok so I found out by rewriting the page structure that a full-width div is default behaviour for mx-break-out when its a child of a standard Tailwind CSS container class which made rewriting the margin calculations redundant. Thanks for the help!