Blade 與 HTML
Blade 元件與純 HTML 是什麼關係 — 如實說明哪些是自動的、哪些是手動的。
結論: 一個方向自動，另一個方向手動
Blade → HTML 是自動且始終準確的。 Blade 元件在伺服器上渲染為純 HTML。本站每個元件頁面的 HTML 分頁，都是 Blade 分頁程式碼的實際渲染輸出 — 絕非人工轉寫，因此不可能與真實輸出產生落差。
不存在 HTML → Blade 的自動轉換工具。 把既有 HTML 換成 Blade 元件是手動作業（見下方步驟）。所謂「可互轉」只在類別詞彙層面成立 — 在標記結構層面，轉換是單向的。
文件雙分頁的原理
每個元件頁面的「用法」區塊都有 Blade / HTML 兩個分頁。HTML 分頁由 Blade::render() 現場產生，因此程式庫升級後文件中的 HTML 也不會過時。以下是嵌入本頁的實例:
<x-button color="primary" icon="rocket">Launch</x-button>
<button class="inline-flex items-center justify-center whitespace-nowrap font-medium tracking-wide transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 rounded-[var(--radius-field)] border-[length:var(--border)] h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] gap-2 bg-primary text-primary-content border-primary hover:bg-primary/90 focus-visible:ring-primary cursor-pointer"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="m14.447 16.377l5.847-5.83c.842-.839 1.263-1.259 1.484-1.792S22 7.627 22 6.44v-.567c0-1.826 0-2.739-.569-3.306S19.947 2 18.116 2h-.57c-1.19 0-1.785 0-2.32.221c-.536.221-.957.641-1.8 1.48L7.58 9.531c-.984.98-1.594 1.589-1.83 2.176a1.5 1.5 0 0 0-.112.562c0 .802.647 1.448 1.942 2.739l.174.173l2.038-2.069a.75.75 0 1 1 1.069 1.053L8.816 16.24l.137.137c1.295 1.29 1.943 1.936 2.747 1.936c.178 0 .348-.031.519-.094c.603-.222 1.219-.836 2.228-1.842m2.747-6.846a1.946 1.946 0 0 1-2.747 0a1.93 1.93 0 0 1 0-2.738a1.946 1.946 0 0 1 2.747 0a1.93 1.93 0 0 1 0 2.738" clip-rule="evenodd"></path>
<path fill="currentColor" d="M9.034 5.963L6.491 8.5c-.467.466-.896.893-1.235 1.28a6 6 0 0 0-.619.82l-.024-.025l-.095-.094a4.9 4.9 0 0 0-1.532-1.004l-.123-.05l-.379-.15a.764.764 0 0 1-.259-1.252C3.345 6.907 4.69 5.566 5.34 5.297a3.4 3.4 0 0 1 1.788-.229c.546.081 1.063.362 1.907.895m4.342 13.35c.205.208.34.355.464.512q.243.311.434.658c.142.26.253.537.474 1.092a.69.69 0 0 0 1.126.224l.084-.083c1.12-1.117 2.465-2.458 2.735-3.105a3.35 3.35 0 0 0 .229-1.782c-.081-.545-.362-1.06-.897-1.902l-2.552 2.544c-.478.477-.916.914-1.313 1.256c-.237.206-.497.41-.784.586" opacity=".3"></path></svg> Launch</button>
只使用 HTML 一側（不用 Blade 的專案）
HTML 分頁的輸出是純 HTML 加類別字串，可以複製到不使用 Blade 的專案。需要兩樣東西:
- 編譯好的 CSS — 這些類別引用主題權杖（bg-primary 等）與調音權杖（p-md、var(--radius-box) 等）。目前官方發佈只有 Composer 套件建置；獨立的 CSS 套件（npm）正在準備中。
- Alpine.js — 動態元件（modal / tabs / dropdown 等）的 HTML 輸出原樣包含 x-data 屬性。頁面載入 Alpine.js（+ @alpinejs/focus / @alpinejs/collapse）後，複製的 HTML 即可直接運作。靜態元件（button / badge / card 等）完全不需要 JS。
反方向: 把既有 HTML 遷移到 Blade
沒有自動轉換器，但步驟很簡單:
- 在元件目錄的預覽中找出最接近的元件 — 元件目錄 →
- 複製該頁 Blade 分頁的最小範例，對齊 props（color / size / appearance 等）
- 丟掉手寫的類別堆 — 顏色、形狀、間距交給主題與調音
相反的方向 — 離開 Blade 回到純 Tailwind — 有官方工具: php artisan ui:eject 會把 pinion-ui 類別批次改寫為重現所選主題 × 調音外觀的原生 Tailwind（不鎖定的逃生艙）。
哪些元件需要 Alpine
靜態（無需 JS）
button / badge / card / avatar / input / checkbox / progress / tooltip / breadcrumb / stat / timeline / stepper 等
動態（需要 Alpine）
modal / tabs / accordion / dropdown / popover / sidebar / select / alert(dismissible) / notification / collapse 等
常見問題
類別字串與結構可以原樣使用（只要載入了 CSS，外觀即可重現）。但 x-data 的互動屬於 Alpine，在 React / Vue 需移植到各框架的狀態管理。官方的多框架支援計畫以 Web Components 形式提供。
都沒有 — 它沒有被固定。輸出類別是語意權杖（bg-primary、p-md 等），會跟隨目的頁面的 data-theme / data-tune。
能。頁面上展示的每個範例都經過實際渲染驗證 — HTML 分頁就是證據；渲染失敗的範例根本無法出現在頁面上。