成分
免費純 CSS Tailwind CSS 組件，內建 WCAG AA/AAA 可訪問性。無需 JavaScript，與框架無關，並且與 Django、HTMX、Laravel、React、Vue 和任何堆疊相容。即用型且易於自訂。
Frutjam 提供了 52 多個純 CSS Tailwind CSS 元件 - 按鈕、模式、表單、導航、資料顯示等 - 專為 Tailwind CSS v4 建置。每個元件都使用與任何 Tailwind 實用程式類別一起使用的語意類別名稱（.btn、.card、.badge）。沒有捆綁 JavaScript，不需要 React 上下文，而且除了 Tailwind 本身之外也不需要 PostCSS 插件。每個組件均採用 WCAG AA 開箱即用，並配有手動調整的 OKLCH 顏色對，可確保每個表面上的可讀對比。由於 Frutjam 只支援 CSS 並且與框架無關，因此相同的 HTML 標記可以在 Django 模板、HTMX 回應、Laravel Blade、Rails ERB、React JSX 或純靜態 HTML 中工作，無需修改。
Frutjam 新手？
幾秒鐘內即可開始 - 兩次導入即可開始建置。
手風琴
僅 CSS Tailwind CSS 手風琴使用原生 `<details>`/`<summary>`。使用零 JavaScript 展開和折疊內容部分。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
警報
僅限 CSS Tailwind CSS 警報，包含資訊、成功、警告和錯誤變體。柔和的風格、圖示槽和可忽略的圖案。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
阿凡達
僅限 CSS Tailwind CSS 頭像，用於個人資料圖像。尺寸為 xs-xl，組堆疊和在線/離線狀態指示器。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
徽章
僅 CSS Tailwind CSS 徽章，包含主要、次要、重音、訊息、成功、警告和錯誤變體。柔和、輪廓和幻影樣式，尺寸為 xs-lg。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
麵包屑
純 CSS Tailwind CSS 麵包屑導航，具有自訂分隔符號和可存取的地標標記。 WCAG AA，適用於 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 專案。
按鈕
僅 CSS 的 Tailwind CSS 按鈕，具有主要、次要、重音、重影、輪廓和軟變體。尺寸為 xs-xl、載入狀態、停用和圖示按鈕。僅 CSS，WCAG AA，可與 Django、HTMX、Laravel、React 搭配使用。
卡片
僅 CSS Tailwind CSS 卡，具有輪廓、陰影和平面樣式。緊湊型、預設型和大尺寸。卡片內容、卡片標題、卡片頁腳插槽。 WCAG AA，適用於 Django、HTMX、Laravel、React 和任何堆疊。
輪播
僅 CSS Tailwind CSS 輪播使用滾動捕捉。具有導航控制項的水平幻燈片佈局，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
聊天
僅 CSS Tailwind CSS 聊天氣泡組件。發送和接收訊息的開始和結束位置，帶有頭像和時間戳槽。 WCAG AA，適用於 Django、HTMX、Laravel、React 和任何堆疊。
複選框
僅 CSS 的 Tailwind CSS 複選框，具有主要、次要、重音和語義顏色變體。尺寸 xs-xl，不確定狀態。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
可折疊
僅 CSS Tailwind CSS 可折疊面板使用原生 `<details>` 元素。無需 JavaScript 即可顯示和隱藏內容部分。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
組合框
僅 CSS Tailwind CSS 組合框，具有即時搜尋過濾和可存取的下拉清單。鍵盤導航，顏色變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
倒數計時
僅限 CSS Tailwind CSS 倒數計時器。動畫數字顯示天、小時、分鐘和秒。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
差異
僅 CSS 的 Tailwind CSS diff 檢視器，用於與可拖曳分隔符號進行並排內容比較。無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
分音器
僅 CSS Tailwind CSS 分隔線 — 水平和垂直，帶有可選的居中標籤。顏色和尺寸變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
抽屜
僅 CSS Tailwind CSS 抽屜使用本機複選框切換。滑入式側面板可用於導覽或篩選器，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
頁尾
純 CSS Tailwind CSS 頁腳，具有多列佈局、標誌、連結和版權插槽。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 專案配合使用。
標頭
僅 CSS Tailwind CSS 頁面標題 — 帶有品牌、導航和操作槽的頂部欄佈局。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
英雄
僅限 CSS Tailwind CSS 登陸頁面英雄部分。全角佈局，標題、描述和 CTA 居中。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
指標
純 CSS Tailwind CSS 指示器，用於在任何元素角落疊加徽章或點。顏色變體和定位。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
輸入
僅 CSS Tailwind CSS 輸入，具有主要、次要、重音和語義顏色變體。尺寸 xs-xl，前綴和後綴插件插槽，幽靈風格。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
加入
僅 CSS Tailwind CSS 連接用於將按鈕、輸入或選擇分組到連接的單元。水平和垂直。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
大骨節病
僅 CSS Tailwind CSS kbd 元件，用於顯示鍵盤快速鍵和組合鍵。尺寸變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
關聯
僅 CSS Tailwind CSS 連結主要顏色、次要顏色、強調色和中性顏色變體。將滑鼠懸停在底線和普通樣式上。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
載入中
純 CSS Tailwind CSS 載入指示器，帶有旋轉器、點、環和條形動畫。顏色和尺寸變體，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
跑馬燈
僅 CSS Tailwind CSS 選取框，用於水平捲動內容和標誌。透過 CSS 控制速度和方向，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
面具
僅 CSS 的 Tailwind CSS 遮罩，用於將圖像剪切成形狀 - 圓形、方形圓形、心形、六邊形等。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
選單
僅限 CSS Tailwind CSS 導覽清單垂直選單。活動、禁用和圖示項目狀態。尺寸變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
莫代爾
僅 CSS Tailwind CSS 模態使用原生 `<dialog>` 元素。響應式大小、背景和焦點陷阱。沒有用於基本使用的 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
導覽列
僅 CSS Tailwind CSS 導覽欄，包含品牌、導覽連結和操作槽。粘性和透明變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
分頁
僅 CSS 的 Tailwind CSS 分頁，用於編號頁面、上一頁/下一頁箭頭、省略號間隙、可訪問的無線電輸入和頁面跳轉選擇。無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
彈出視窗
僅 CSS Tailwind CSS 彈出視窗使用本機彈出視窗 API。用於工具提示和下拉式選單的浮動內容面板。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
進步
純 CSS Tailwind CSS 進度條，具有主要、次要、重音和語義顏色變體。尺寸為 xs-xl。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
放射狀進步
僅限 CSS Tailwind CSS 徑向進度 — 帶有百分比顯示的圓形進度環。顏色和尺寸變體，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
收音機
純 CSS Tailwind CSS 單選按鈕，具有主要、次要、重音和語義顏色變體。尺寸為 xs-xl。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
範圍
僅 CSS Tailwind CSS 範圍滑桿，具有主要、次要、重音和語義顏色變體。尺寸為 xs-xl。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
等級
僅 CSS Tailwind CSS 星級和心率組件。尺寸 xs-xl，半星支持，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
選擇
僅 CSS Tailwind CSS 選擇下拉選單，包含主要、次要、重音和語義顏色變體。尺寸 xs-xl，幽靈風格。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
側邊欄
僅 CSS Tailwind CSS 側邊欄，用於側面導覽面板。可折疊，帶有導航項目狀態和部分標題。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
骨骼
純 CSS Tailwind CSS 骨架載入器，用於佔位符 UI。帶有脈衝動畫的圓形、矩形和文字線形狀。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
統計數據
僅 CSS Tailwind CSS stat 用於顯示指標。值、標籤、描述和圖示槽。響應式網格佈局。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
地位
僅 CSS Tailwind CSS 狀態點指示器，具有主要、成功、警告和錯誤顏色變體。尺寸為 xs-xl。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
步驟
僅 CSS Tailwind CSS 步驟用於多步驟精靈和進度指示器。水平和垂直佈局，每個步驟的顏色變化。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
表面
僅 CSS Tailwind CSS 表面，用於將主題背景和文字顏色應用到容器。所有顏色變體。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
交換
僅 CSS Tailwind CSS 交換用於在兩個元素之間切換。翻轉、旋轉和淡入淡出動畫，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
桌子
僅 CSS 的 Tailwind CSS 表格，具有斑馬條紋、緊湊和預設尺寸、固定列和行懸停狀態。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
選項卡
僅 CSS 的 Tailwind CSS 選項卡，具有邊框、提升、盒裝和藥丸樣式變體。活動狀態和大小，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
標籤
僅 CSS Tailwind CSS 標籤（晶片），具有色彩變體、柔和的風格和可移動按鈕。尺寸為 xs-lg。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
文字區
僅 CSS 的 Tailwind CSS 文字區域，具有主要、次要、重音和語義顏色變體。尺寸 xs-xl，幽靈風格。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
時間軸
僅 CSS Tailwind CSS 時間線，用於按時間順序排列的事件清單。帶有圖示、內容和連接線槽的垂直佈局。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
吐司
僅 CSS Tailwind CSS toast 用於通知定位 - 頂部、底部、開始、結束和中心放置。沒有用於佈局的 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
切換
僅 CSS Tailwind CSS 切換開關，具有主要、次要、重音和語義顏色變體。尺寸為 xs-xl。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
工具提示
僅限 CSS Tailwind CSS 工具提示，具有頂部、底部、左側和右側位置。顏色變體，無需 JavaScript。 WCAG AA 可訪問，可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。
常見問題
所有 Frutjam 組件都只使用 CSS 嗎？
是的－絕大多數元件都是純 CSS，JavaScript 為零。按鈕、徽章、卡片、表單、警報、模式、抽屜、選項卡等都可以使用純 HTML 和 CSS。少數沒有本機 HTML 等效項的元件（toast 定位、組合框過濾、輪播控制項）提供可選的輕量級 JS 幫助器，但 CSS 佈局和樣式根本不需要 JavaScript。
Frutjam 元件可以與 Django、HTMX 和 Laravel 一起使用嗎？
是的——Frutjam 與框架無關。因為每個元件都是純 CSS 的，所以它可以與任何伺服器渲染的堆疊一起使用。 Django 模板、HTMX、Laravel Blade、Rails ERB、純 HTML — 如果您可以輸出 HTML，Frutjam 就可以。不需要 React，不需要建置管道，不需要 JavaScript 框架。
WCAG 組件是否可存取？
是的 — 每個組件保證 WCAG AA 對比。每個顏色對（--color-primary / --color-on-primary 等）均在 OKLCH 中手動調整，以滿足 WCAG AA 對比度要求。語意 HTML 元素貫穿始終 — 用於模式的本機 <dialog>、手風琴的 <details> 以及需要時適當的 ARIA 屬性。
Frutjam 元件與 DaisyUI 相比如何？
兩者都是僅 CSS 的 Tailwind CSS 元件庫，但 Frutjam 是專門為 Tailwind CSS v4 構建的，使用 OKLCH 顏色標記和有保證的 WCAG AA 對比度對，並提供免費的 MCP 伺服器（Cherry）用於付費 AI 編輯器集成 - DaisyUI 的同等伺服器（Blueprint）是的服務器。 Frutjam 還提供明確的 on-{color} 標記對，而不是在運行時計算前景色。
除了 Tailwind CSS 之外，我還需要安裝其他東西嗎？
只要多加一行。在 @import "tailwindcss"; 之後將 @plugin "frutjam"; 加入 CSS 檔案中，並透過 npm i -D frutjam 安裝。就是這樣——沒有 PostCSS 插件，沒有 JavaScript 配置，沒有需要匯入的單獨樣式表。所有組件均立即可用，並由 Tailwind 自動進行 Treeshaking。
我可以將 Frutjam 元件與 React 或 Next.js 一起使用嗎？
是的。由於 Frutjam 僅支援 CSS，因此您可以在任何堆疊中以相同的方式使用元件 — 只需套用類別名稱。對於受益於 JavaScript 控制的少數元件（模態開啟/關閉、toast、輪播），Frutjam 提供了可選的 React 鉤子 (frutjam/eact)，它包裝本機 DOM 調用，無需額外的依賴項。