Day8 - Astro Series: Tailwind integration

Astro 系列文第八日：實作整合 Tailwind

#系列文

前言

Tailwind 是一款 CSS 框架與學習 Astro 並無絕對關係，但基於它的社群熱門程度與可以快速靈活導入樣式的特性，何不來嘗試運用看看呢？嘗試導入 Tailwind 並且運用在建構元件樣式上吧。

整合 Tailwind

在 Astro 中安裝整合非常的簡單，只需要在專案終端中輸入 npx astro add tailwind 安裝便會執行，都完成之後便可以開始在整個專案中使用 Tailwind：

Astro 將會執行以下指令:
  如果你跳過這個步驟隨時可以回來

 ╭─────────────────────────────────────────────────╮
 │ yarn add @astrojs/tailwind tailwindcss@^3.0.24  │
 ╰─────────────────────────────────────────────────╯
繼續？ » (Y/n)

Astro 將會創建最基礎的 ./tailwind.config.cjs 檔案.
繼續？ » (Y/n)

Astro 將會對設定檔作以下的更動:
 ╭ astro.config.mjs ─────────────────────────────╮
 │ import { defineConfig } from 'astro/config';  │
 │                                               │
 │ import tailwind from "@astrojs/tailwind";     │
 │                                               │
 │ // https://astro.build/config                 │
 │ export default defineConfig({                 │
 │   integrations: [tailwind()]                  │
 │ });                                           │
 ╰───────────────────────────────────────────────╯
繼續？ » (Y/n)

添加設定與套件

安裝完成後可以透過專案根部自動建立的 tailwind.config.cjs 來添加設定或新增套件，以下是我通常會更動的設定：

更改預設 `base.css` 檔案

@tailwind base;
@tailwind components;
@tailwind utilities;

預設 Tailwind 會自動將以上內容的 CSS 檔案給注入到整個專案之中，自行創建一個 base.css 放在 src/style 資料夾中，這樣要添加額外的全域 CSS 或是使用 [@layer](https://tailwindcss.com/docs/functions-and-directives#layer) 指令，或者是在某些頁面不想預設引入這隻檔案的問題都能解決。具體會需要把 astro.config.mjs 中 applyBaseStyles 屬性改為 false，再從元件中增添自己的 base.css。

  integrations: [
    tailwind({
      applyBaseStyles: false,
    }),
  ],

定義變數到 CSS 變數之中

頭痛的是，有時候要寫非常客製化的元件使用 Scoped CSS，但又要使用到 Tailwind 中定義的變數怎麼辦？沒關係，它們兩個依舊可以相處得很好！只需要將網站樣式的 CSS 變數定義在 :root 上，這樣不管何處的元件都能存取到該變數而非只局限於 Tailwind 上，Tailwind 設定檔也可以設定引用 CSS 變數🔗。

添加 Tailwind 插件

@tailwindcss/typography🔗 - 基於靜態網站經常存放文章文件等類型的資料，如果有一套好的樣式可以讓文件更好閱讀，這個插件添加了一切你所需要的文章樣式，並且可以依此為基準擴充。（範例可參考我的部落格文章🔗）
tailwindcss-fluid-type🔗 - 如果你希望文字大小尺寸是依照裝置尺寸來設置的，這個套件可以給你更進一步的控制文字在不同版面中顯示的尺寸。（範例可參考我的部落格標題🔗）

實作按鈕

最後我們再用 Tailwind 的方式重構上次寫的按鈕，更換一下寫法也能得到同樣的結果，以下是我的方式：

interface Props {
  href?: string;
  theme?: keyof typeof themeClassList;
  size?: keyof typeof sizeClassList;
}

const { href, theme, size, ...rest } = Astro.props;
const Element = href ? 'a' : 'button';

// 定義主題種類
const themeClassList = {
  solid: '',
  outline: '',
  secondary: '',
  link: '',
};

// 定義尺寸種類
const sizeClassList = {
  md: '',
  lg: '',
  block: '',
};

// 決定當前主題與尺寸
const themeClass = theme ? themeClassList[theme] : themeClassList['solid'];
const sizeClass = size ? sizeClassList[size] : sizeClassList['md'];

// 預設主題與尺寸
const defaultButtonStyle = '';
---

<Element href={href} class:list={[defaultButtonStyle, themeClass, sizeClass]} {...rest}>
  <slot />
</Element>

<button>Click Me</button>
<a href="/" size="block" theme="outline">Click Me</button>

總結

這個章節更偏向我在 Astro 中使用 Tailwind 的歷程心得，如果你沒有打算導入 Tailwind 可以直接前往下一章節即可。透過兩個章節都在練習寫按鈕，現在推薦你嘗試撰寫各式各樣的元件熟悉使用 Astro，對你來說都不會是問題了。

前言