要在 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