我有这样的布局：

这是下面图像的代码：

<main>
      <div className="flex justify-center max-w-xl mx-auto bg-purple-400">
      ...
      </div>
</main>

我想要的是有两个div，一个在左边，一个在右边（在白色区域），它们占据了剩余的空间，而不影响主要内容区域的宽度。
我已经试验过这段代码，但还没有弄明白：

<main className="flex">
      <div className="">left white area</div>
      <div className="flex justify-center max-w-xl mx-auto bg-purple-400">
      ...
      </div>
      <div className="">right white area</div>
</main>

更新：
我能够获得媒体查询所需的行为，即使我想用原生的tailwind来实现这一点，这也能很好地工作：

--HTML--
<main className="flex">
      <div id="left" className="hidden">left white area</div>
      <div className="flex justify-center max-w-xl mx-auto bg-purple-400">
      ...
      </div>
      <div id="right" className="hidden">right white area</div>
</main>

--CSS--
@media screen and (min-width: 64rem) {
  #left,
  #right {
    width: calc((100vw - 64rem) / 2);
    display: block;
  }
}

我会让这个线程开放的任何其他可能的解决方案。如果它可以计算出只是顺风，这就更好了。
再次编辑以稍微清理代码。