Tailwind CSS 的 size-* 用法,是將 w-* 和 h-* 結合使用的快捷寫法。原先看著官方文件上的寫法,套用的既有的 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
按讚加入粉絲團