Tailwind+Rails实现文本左对齐且大屏容器居中

我用Tailwind和Rails搭建博客页面，已经设置所有屏幕尺寸（sm-xl）下文本左对齐。现在希望在大于md的屏幕上，保持文本左对齐的同时让内容容器居中（不是md:text-center那种让文本居中）。

当前application.html.erb代码：

<body class="mx-auto">
<div>
  <%= render 'shared/navbar' %>
  <p class="notice"><%= notice %></p>
  <p class="alert"><%= alert %></p>
    <div class="px-10 pb-20 md:max-w-2xl ">
     <%= yield %>
    </div>
  </div>
<%= render 'shared/footer' %>

我尝试了以下类名组合都无效：

• div class="px-10 pb-20 md:text-center"
• div class="px-10 pb-20 md:items-center"
• div class="px-10 pb-20 md:max-w-2xl md:inline-block md:text-left"
• div class="px-10 pb-20 place-content-center"
• div class="px-10 pb-20 max-w-md mx-auto"
• div class="px-10 pb-20 mx-auto md:text-left max-w-md md:max-w-non"

直接给内容容器加上mx-auto类就行，修改后的代码如下：

<div class="px-10 pb-20 md:max-w-2xl mx-auto">
  <%= yield %>
</div>

为什么这么改： #

• mx-auto是让容器水平居中的核心，小屏时容器宽度默认占满整个屏幕，所以居中效果不明显；当屏幕尺寸超过md时，md:max-w-2xl限制了容器的最大宽度，此时mx-auto就会让这个固定宽度的容器在页面中间显示，而文本依然保持左对齐（因为没加text-center类）。
• 如果想让小屏也有固定宽度限制，可以再加个小屏的max-w-*类，比如sm:max-w-md，这样小屏时容器也会居中且有宽度限制。

内容的提问来源于stack exchange，提问作者AntMar