Tailwind CSS 利用 container 這個 class 來設定內容的最大寬度不要延伸到整個頁面，一般建議切版最外層都要加上 container 這個 class 會比較好。

加上 container 這個 class 就可以設定寬度不要到瀏覽器的 100%，只是不同於 bootstrap，Tailwind CSS 的 container 並不會自動置中，所以我們必須加上 mx-auto 來讓區塊置中。

<div class="container mx-auto">
  <!-- ... -->
</div>

 

如果希望預設的 container 內容就可以置中，可以修改 tailwind.config.js 的設定：

module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}

 

Tailwind CSS 的 container 跟 bootstrap 一樣，在最小的解析度就會寬度變成 100%，如果希望可以提前變成 100%，則可以設定 breakpoint，像是：

<div class="md:container md:mx-auto">
  <!-- ... -->
</div>

 

像設定 md: 的話就會提前在 md 的解析度變成 100% 的寬度，而各自對應的解析度與瀏覽器寬度如下：

sm (640px) max-width: 640px;
md (768px) max-width: 768px;
lg (1024px) max-width: 1024px;
xl (1280px) max-width: 1280px;
2xl (1536px) max-width: 1536px;