安裝

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

如何在 Tailwind CSS 專案中安裝 Frutjam UI 庫？

請確保您的電腦上安裝了可用的 Tailwind CSS 項目，以及 Node 和 NPMload">Node 和 NPMload">Node 和 NPMload">Node 和 NPM。 Frutjam 可與 Tailwind 版本 4 搭配使用。

透過執行以下命令將 frutjam 安裝為節點包：

npm i -D frutjam

使用 @plugin 指令將 Frutjam 加入您的 input.css 中：

1
2

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

JavaScript & React — 可選，非必需

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

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

Vanilla 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()

React Hooks — frutjam/eact

圍繞相同的本機 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。

使用 CDN

使用 frutjam UI 庫的 CDN 版本可快速輕鬆地集成，無需本地設定。將此 CDN 版本的 frutjam 僅用於開發目的，不得用於生產。

1
2

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

下一步

安裝後，請嘗試使用按鈕元件來查看 Frutjam 的運作情況，或探索完整的元件庫。

想要了解 Frutjam CSS 優先方法背後的想法嗎？ 了解我們為何以這種方式建構它 →