在網站開發上,不免會遇到 class 命名、以及在 HTML 檔案與 CSS 檔案間來回切換修改的困擾,Tailwind 則透過 Utility-First Class 提出了改良方案,而這次使用開箱即用的 Tailwind Starter Kit 試作一個健身品牌的 Landing Page。
- 使用 Tailwind Starter Kit 作為模板製作健身網站 Landing Page。
- 使用 Tailwind 撰寫網頁結構與樣式。
- 載入 Random Unsplash API 健身房關聯圖片,使每次開啟網頁時都有不一樣的封面圖片。
- 透過 AOS (Animate On Scroll) 套件達成在滾動網頁時加入轉場動畫。