跳至主要內容

文件

Frutjam 文件 — 安裝、配置、主題、色彩和排版。僅 CSS Tailwind CSS v4,零 JavaScript,可存取 WCAG AA。適用於 Django、HTMX、Laravel、React 和任何堆疊。

這些文件涵蓋了從新的 Tailwind CSS v4 專案到完全主題化、可存取的 UI 所需的一切。從安裝(兩行 CSS)開始,然後探索主題系統如何使用 CSS 變數和單一 data-theme 屬性來運作。顏色系統使用語意 OKLCH 標記,自動滿足 WCAG AA 對比度,無需手動顏色檢查。透過配置選項,您可以確定令牌的範圍、添加前綴以避免衝突,或僅挑選保持 CSS 輸出精簡所需的元件。

顏色

Frutjam 的顏色系統使用語義 CSS 標記,旨在滿足開箱即用的 WCAG AA 對比。無需 JavaScript,支援深色模式,相容於 Tailwind CSS v4。適用於 Django、HTMX、Laravel 和任何純 CSS 堆疊。

概述

Frutjam 是免費的純 CSS Tailwind CSS v4 UI 庫。零 JavaScript、WCAG AA/AAA 可存取、與框架無關。使用可與 Django、HTMX、Laravel、React 和任何堆疊配合使用的語義元件來建立現代介面。

主題

Frutjam 的純 CSS 主題系統使用 CSS 變數和單一資料屬性。無需 JavaScript 即可切換淺色、深色和自訂主題。內建 WCAG AA 顏色令牌,可與 Django、HTMX、Laravel 和任何 Tailwind CSS v4 專案搭配使用。

安裝

只需幾分鐘即可安裝 Frutjam,這是純 CSS 的 Tailwind CSS UI 庫。兩次導入、零 JavaScript、開箱即用的 WCAG 可存取元件。適用於 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 專案。

配置

配置僅限 Frutjam CSS 的 Tailwind CSS 插件。設定預設主題、定義自訂顏色標記、切換前綴系統 - 需要零 JavaScript。 WCAG 可存取的預設設置,適用於 Django、HTMX、Laravel 和任何框架。

版式

Frutjam 的純 CSS 版式系統。使用 Tailwind CSS v4 進行語意 HTML 文字縮放,可存取 WCAG,無需 JavaScript。適用於 Django、HTMX、Laravel、React 和任何框架。

從哪裡開始

Frutjam 新手?按照此路徑從零到一個完全主題化、可訪問的 Tailwind CSS v4 專案。

  1. 1
    安裝

    安裝 npm 套件並在 CSS 新增兩行。沒有 JavaScript 配置,沒有 PostCSS 插件。

  2. 2
    概述

    了解 Frutjam 如何與 Tailwind CSS 實用程式、語義組件類別和 WCAG AA 顏色標記一起工作。

  3. 3
    主題

    應用內建主題或使用 CSS 變數和單一 data-theme 屬性來建立自己的主題。

  4. 4
    顏色

    了解語意顏色標記的工作原理以及每個 on-{color} 對如何自動保證 WCAG AA 對比度。

  5. 5
    配置

    設定前綴、根元素的範圍標記、精選組件或與另一個 CSS 框架整合。

常見問題

Frutjam 是否需要 Tailwind CSS v4?

是的 - Frutjam 是為 Tailwind CSS v4 建構的,並使用 v4 中引入的 @plugin 指令。它與 Tailwind CSS v3 不相容。如果您仍在使用 v3,請先使用官方 Tailwind 遷移指南升級至 v4。

Frutjam 是免費且開源的嗎?

是的 — Frutjam 核心元件庫是免費且開源的(MIT 許可)。 Pro 和 Team 計劃新增了進階 UI 區塊、模板和用於 AI 編輯器整合的無限 Cherry MCP 請求。

我可以在不閱讀所有文件的情況下使用 Frutjam 嗎?

是的。安裝它,選擇一個主題,然後開始使用元件類別。這些文件是參考資料——您無需從頭到尾閱讀它們。大多數開發人員從 buttoncard 組件開始,然後從那裡開始探索。