此系列文章已改編成書,歡迎購買:https://www.tenlong.com.tw/products/9786267146460?list_name=i-r-zh_tw
跟 Bootstrap 一樣也是手機優先的響應式斷點設計,官方文件也提供尺寸對照:
讓前端在開發輕鬆在 HTML 上寫斷點,不用特別去 CSS 撰寫了。
我可以透過 斷點:條件
的方式來撰寫斷點,例如:
<img class="w-16 md:w-32 lg:w-48" src="...">
這一段是表示:
demo: https://codepen.io/hnzxewqw/pen/XWMPEZp
官方推薦是從小到大的斷點依序撰寫,好讀又直觀,當然想要隨意換順序也可以,但為了以後維護,還是有順序的寫會比較好。
demo: https://codepen.io/hnzxewqw/pen/WNpgzgb
Tailwind 因為可以自由控制元素達到響應式的效果,所以上方範例手機板看起來是一張卡片,但手機板以上就會成橫幅的排版,這時候就可以看得出來此彈性的優勢別於元件型框架的差別。可以自由地做成任何想要的排版,我覺得這部份真的非常棒,不用受限於元件庫的限制了。
想要做卡片、彈窗,還是其他常見的元件,似乎都可以透過 Utility-First 來完成。
有提到 Tailwind 是手機優先開始撰寫,所以手機板不需要使用前綴詞,不要誤用 sm 是手機螢幕大小,sm 的預設斷點為 640px 喔!官方範例為:
<div class="sm:text-center"></div>
正確的寫法為:
<div class="text-center sm:text-left">這是一段文字</div>
上方的寫法意思是,在手機板的時候文字居中,解析度 640px 以上時,文字靠左。
demo: https://codepen.io/hnzxewqw/pen/PopdRvr
Tailwind 的斷點只有 min-width
,沒有 max-width
,這代表我都是要從手機板出發來寫斷點,如果我只想在某個元素使用斷點,我只需要在更大的斷點上寫我要的內容,就會覆蓋前一個斷點的內容,比如說下方範例:
demo: https://codepen.io/hnzxewqw/pen/PopdRvr
我有一個方塊,在手機板的時候要靠左,並且是蜜桃色的,但隨著螢幕尺寸的變化,會慢慢變成不同的顏色,甚至到最大的斷點時,可以設定讓方塊靠右對齊。
透過斷點達到想呈現的效果就是這麼容易。
Tailwind 的優點就是可以自由的客製化,假如預設的斷點比較不符專案使用,也可以透過 tailwind.config.js
去設定想要的斷點喔!斷點的前綴詞可以自訂義。
// 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) { ... }
},
}
}
這裡好像是 64px、128px、256px,
哈哈 用了 tailwind
心中都會默默乘四
感謝通知,盡快修改!