手刻 Figma Tailwind CSS UI / Design to Code
把 Figma Tailwind CSS Ui Kit 的組件轉換成程式碼
自從學習了 tailwindcss 後就深深的愛上這個工具, 他和 bootstrap 很像, 有很多 uility class 可以用, 不同的是 bootstrap 除了 utility class 還有許多現成的組件可以套用, 而 tailwindcss 則是全部是 utility class, 讓開發者可以不用寫一行 css 的情況下完全在 html 標籤內作業. 我的心得是沒有設計稿要刻出漂亮的 ui 元件, 本身要對設計有一定的認識和了解, 比方說要懂 Design Principle, 要懂得運用 font (family, weight, color), padding, margin, space, grid, alignment, negative space, 還有非常重要的 color. 如果有這方面的概念, 用 tailwindcss 可以很自然的手刻出漂亮的元件.
我正在找部落格的範例, 網海茫茫, portfolio / blog template 多倒數不清, 一直都找不到滿意的範例, 於是想到在 Figma Community 找靈感, 順便練習 UI 設計, 結果看到了 Tailwind CSS UI Kit, 裡面有一些很漂亮的 UI 元件, 就有衝動刻出來. 我使用 vue/vite 框架, 原因是 vite 有 hmr (hot module reload) 的功能, 我們在修改部分程式碼儲存後, 網頁會立即更新變動的原件, 立刻渲染出來. 比起 vue-cli, nuxt, next, create-react-app 在開發上便利且快速許多. 因為沒有 hmr 的功能每一次修改程式碼儲存後整個專案都要重新打包編譯, 非常不合理而且耗費 CPU 資源.
我看了設計稿後發覺並不需要用到 tailwindcss, 原因是 Figma 提供元件所有的 css 資料, 在 inspect 項目下還有 css 代碼, 有了這麼豐富的資訊, 用純粹的 css 來刻 UI 元件是最好最方便最快的方法. 這份 UI Kit 只有 Nabvar, Alerts, Card, Form (Signin, Signup), 所以我一鼓作氣一次完成. 全部響應式. 有興趣的朋友可以下載我的 Github 直接套用.
P.S. 我把專案部屬到 Vercel, 可是顯示的 font family 是預設值, 並不是我引入的 Quicksand 字體, 我猜可能是 Vite 在打包編譯過程中出了問題, 我後來有把 <link> 插入 index.html 並重新 build 過, 可是結果還是一樣, 我沒有深入探究. 我認為換個框架, vue-cli, nuxt 可能就沒有這個問題, 畢竟 vite 還不到完全成熟的階段.
