安裝

使用 Tailwind CSS v4、UnoCSS 安裝僅 CSS 的 Frutjam UI 函式庫，或完全不安裝建置步驟。 65+ 個可存取元件，零 JavaScript，WCAG AA。適用於 Django、HTMX、Laravel、React 和任何堆疊。

安裝

npm i -D frutjam

然後選擇下面與您的設定相符的行。每個都為您提供相同的組件。

順風 CSS v4

你需要一個工作 順風 CSS 項目，加上 節點 和 npm。 Frutjam 需要 Tailwind 4。

將Frutjam 加入您的 input.css 與 @plugin 指示：

1
2

@import "tailwindcss";
@plugin "frutjam";

這就是整個設定。所有 65 多個元件均可立即使用，且 Tailwind 僅提供您的標記所使用的元件。

烏諾CSS

Frutjam 提供了預設，因此 UnoCSS 只產生您使用的元件，就像 Tailwind 外掛程式一樣。

1
2
3
4
5
6
7

// uno.config.js
import { defineConfig, presetWind4 } from 'unocss';
import { presetFrutjam } from 'frutjam/unocss';

export default defineConfig({
  presets: [presetWind4(), presetFrutjam()],
});

每個類別都像在 Tailwind 下一樣工作，變體也是如此：

1
2
3

<button class="btn btn-error btn-xl">Delete</button>
<button class="md:btn-error">Red from the medium breakpoint up</button>
<div class="hover:card-primary">Fills on hover</div>

添加 presetAttributify() 組件名稱成為一個屬性，每個值都被視為它的變體：

1
2

<button btn="error xl">Delete</button>
<button btn="md:(error xl)">Red and large from the medium breakpoint up</button>

第二行需要 transformerVariantGroup() 對於括號語法。請注意，像這樣的屬性 btn 不是有效的 HTML，因此如果您驗證標記，請使用類別形式或 UnoCSS un- 前綴。

選項

連結組件需要一行配置

UnoCSS 對待 link 作為 CSS 的變體 :link 偽類，其預設分隔符號包括 -。所以 link-2xl 讀作“2xl，當未訪問時”而不是作為類名，並且不會生成任何內容。它僅影響此組件，並且僅影響 link-* 修飾符。

要嘛告訴 UnoCSS 僅按冒號分割：

1
2
3
4

export default defineConfig({
  separators: [':'],
  presets: [presetWind4(), presetFrutjam()],
});

或使用前綴，其中包含除 link 在名字的前面：

presets: [presetWind4(), presetFrutjam({ prefix: 'fj' })],   // fj-link-2xl

其他所有組件均不受影響。 link 是 57 個名字與偽類衝突的唯一一個。

無實用發動機

Frutjam 是使用 Tailwind 建構的，但元件編譯為讀取自訂屬性的普通 CSS。如果您的專案根本不使用實用程式引擎，請匯入樣式表而不是外掛程式：

import 'frutjam/css';

這就是整個設定。每個組件類別都可以工作，主題可以切換 data-theme 像往常一樣，不需要其他任何東西。它壓縮後大小為 30 KB，包含基本樣式、主題和所有 65 個以上組件。

只拉入您需要的內容：

1
2
3
4

import 'frutjam/css/base';              // tokens and reset, always needed
import 'frutjam/css/components/button';
import 'frutjam/css/components/card';
import 'frutjam/css/themes/darkberry';  // optional

或者根本沒有建置步驟：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

沒有建置步驟

放入標籤並開始編寫標記。將其用於原型或您不建立的頁面，而不是用於生產，因為它附帶了每個組件。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.components.css">

要在同一頁面上試驗 Tailwind 的實用程序，請在其旁邊添加 Tailwind 的瀏覽器構建：

1
2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frutjam@2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

JavaScript 和 React：可選，非必需

Frutjam 是原生優先和 CSS 優先。絕大多數元件：按鈕、徽章、卡片、表單、警報等：使用純 HTML 和 CSS，無需任何 JavaScript。原生 HTML 元素如 <dialog>, <details>， 和 <input type="checkbox"> 處理瀏覽器已經支援的互動性。所有元件均可透過 WCAG AA 開箱即用，並可與 Django、HTMX、Laravel、React、Next.js 和任何堆疊配合使用。

少數元件沒有本機 HTML 等效項（toast 通知、組合方塊過濾、輪播控制）。僅針對這些情況，Frutjam 提供了輕量級可選助手。

普通JS： frutjam/js

與框架無關的 ES 模組助手，用於需要它們的組件。附加到任何 DOM 元素，無需框架。

1
2
3
4
5
6

import { createModal } from 'frutjam/js'

const modal = createModal(document.getElementById('myModal'))
modal.open()   // calls showModal()
modal.close()  // calls close()
modal.toggle()

反應掛鉤： frutjam/react

圍繞相同的本機 DOM 調用的精簡 React 包裝器。每個鉤子返回一個 ref 您附加到元素和方法來控制它，除了 React 本身之外沒有額外的依賴項。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { useModal } from 'frutjam/react'

export default function App() {
  const modal = useModal()
  return (
    <>
      <button onClick={modal.open}>Open</button>
      <dialog ref={modal.ref} className="modal">...</dialog>
    </>
  )
}

適用於： useModal, useDrawer, useCollapsible, useTooltip, useTabs, useToast, useCarousel, useCombobox.

下一步

安裝後，嘗試 按鈕組件 觀看 Frutjam 的實際應用，或探索完整的 元件庫.

想要了解 Frutjam CSS 優先方法背後的想法嗎？ 了解我們為什麼這樣建構它 →