前言
Tailwind 是一款 CSS 框架與學習 Astro 並無絕對關係,但基於它的社群熱門程度與可以快速靈活導入樣式的特性,何不來嘗試運用看看呢?嘗試導入 Tailwind 並且運用在建構元件樣式上吧。
整合 Tailwind
在 Astro 中安裝整合非常的簡單,只需要在專案終端中輸入 npx astro add tailwind
安裝便會執行,都完成之後便可以開始在整個專案中使用 Tailwind:
添加設定與套件
安裝完成後可以透過專案根部自動建立的 tailwind.config.cjs
來添加設定或新增套件,以下是我通常會更動的設定:
更改預設 base.css
檔案
預設 Tailwind 會自動將以上內容的 CSS 檔案給注入到整個專案之中,自行創建一個 base.css
放在 src/style
資料夾中,這樣要添加額外的全域 CSS 或是使用 [@layer](https://tailwindcss.com/docs/functions-and-directives#layer)
指令,或者是在某些頁面不想預設引入這隻檔案的問題都能解決。具體會需要把 astro.config.mjs
中 applyBaseStyles
屬性改為 false
,再從元件中增添自己的 base.css
。
定義變數到 CSS 變數之中
頭痛的是,有時候要寫非常客製化的元件使用 Scoped CSS,但又要使用到 Tailwind 中定義的變數怎麼辦?沒關係,它們兩個依舊可以相處得很好!只需要將網站樣式的 CSS 變數定義在 :root
上,這樣不管何處的元件都能存取到該變數而非只局限於 Tailwind 上,Tailwind 設定檔也可以設定引用 CSS 變數。
添加 Tailwind 插件
- @tailwindcss/typography - 基於靜態網站經常存放文章文件等類型的資料,如果有一套好的樣式可以讓文件更好閱讀,這個插件添加了一切你所需要的文章樣式,並且可以依此為基準擴充。(範例可參考我的部落格文章)
- tailwindcss-fluid-type - 如果你希望文字大小尺寸是依照裝置尺寸來設置的,這個套件可以給你更進一步的控制文字在不同版面中顯示的尺寸。(範例可參考我的部落格標題)
實作按鈕
最後我們再用 Tailwind 的方式重構上次寫的按鈕,更換一下寫法也能得到同樣的結果,以下是我的方式:
總結
這個章節更偏向我在 Astro 中使用 Tailwind 的歷程心得,如果你沒有打算導入 Tailwind 可以直接前往下一章節即可。透過兩個章節都在練習寫按鈕,現在推薦你嘗試撰寫各式各樣的元件熟悉使用 Astro,對你來說都不會是問題了。
延伸閱讀
- 不需要學 Tailwind 也可以用 Tailwind - 網頁東東
- Day8 - 實作整合 Tailwind - 相同文章同步發布於 iThome 鐵人賽中