[筆記] Tailwind CSS size-Utilities

Tailwind CSS 的 size-* 用法,是將 w-* 和 h-* 結合使用的快捷寫法。原先看著官方文件上的寫法,套用的既有的 Tailwind CSS 專案上卻沒有作用。這邊筆記下排除方法。

tailwind css


內容

size-* 用法是從 Tailwind CSS 的 v3.4 開始可使用。換言之,若你既有的專案 Tailwind CSS 版本低於 3.4,那就會沒有效果。

解決方法

1. 升級 Tailwind CSS 版本到 3.4
2. 維持既有的寫法,如 w-4 h-4 而不是寫 size-4。不過若你有使用 eslint 來進行 tailwindcss 檢查的話,那要注意對應的 Tailwind CSS 版本是否有符合。


參考資料

1. Tailwind CSS v3.4: Dynamic viewport units, :has() support, balanced headlines, subgrid, and more

按讚加入粉絲團

延伸閱讀