要在 Tailwind CSS 設定響應式網站，首先要認識一下他設定的變形點(breakpoint )，分別如下：

Breakpoint prefix Minimum width CSS
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

接著在設定 class name 的時候，就可以依據這些 breakpoint 來讓網頁在不同的解析度下切換不同的樣式，比如說：

<div class="text-center sm:text-left"></div>

這樣就會在最小的解析度時讓文字居中，在 sm 的解析度(640px)之上讓文字靠左對齊，規則來說就是有設定 breakpoint，在那之上就會吃該設定的樣式，不用每一層都設定。

如果想要調整 breakpoint，則可以到 tailwind.config.js 去設定。

module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

 

官方文件：
Responsive Design