要在 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
![[CSS] 垂直文字書寫- writing-mode 和 text-orientation](/assets/upload/1580227388021_0.jpg)
