---
title: "Installation"
type: guide
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Install Frutjam CSS-only Tailwind CSS UI library. Two imports, zero JavaScript, Tailwind v4 compatible. Works with Django, HTMX, Laravel, and React."
url: https://frutjam.com/zh-hant/docs/installation
---

# Installation

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

請確保您的電腦上安裝了可用的 [Tailwind CSS](https://tailwindcss.com/docs/installation/using-vite) 項目，以及 [Node](https://nodejs.org/en/download) 和 NPMload">Node 和 NPMload">Node 和 NPMload">Node 和 NPM。 Frutjam 可與 Tailwind 版本 4 搭配使用。

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

```bash
npm i -D frutjam
```

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

```css
@import "tailwindcss";
@plugin "frutjam";
```

## JavaScript 和React——可選，非必需

Frutjam 是**原生優先和 CSS 優先**。絕大多數元件（按鈕、徽章、卡片、表單、警報等）都可使用純 HTML 和 CSS，無需任何 JavaScript。 `、

和  等原生 HTML 元素可處理瀏覽器已支援的互動性。所有元件均可透過 WCAG AA 開箱即用，並可與 Django、HTMX、Laravel、React、Next.js 和任何堆疊配合使用。

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

### Vanilla JS — frutjam/js

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

```js
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 本身之外沒有額外的依賴項。

```js
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 僅用於開發目的，不得用於生產。

```html
<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>
```

## 下一步

安裝後，請嘗試使用[按鈕元件](/zh-hant/components/button)來查看 Frutjam 的運作情況，或探索完整的[元件庫](/zh-hant/components)。

AI編輯器集成

### 使用 Claude Code、Cursor 或其他 AI 編輯器？

Cherry MCP 將 Frutjam 的完整組件庫直接帶入您的 AI 編輯器上下文中 — 準確的類名稱、實時文檔，無需複製粘貼。

            [了解 Cherry MCP →](/zh-hant/products/cherry)

想要了解 Frutjam CSS 優先方法背後的想法嗎？ [了解我們為何以這種方式建構它 →](/blog/why-i-built-frutjam-css-first-tailwind-ui-library)

`