安装

只需几分钟即可安装 Frutjam，这是纯 CSS 的 Tailwind CSS UI 库。两次导入、零 JavaScript、开箱即用的 WCAG 可访问组件。适用于 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目。

如何在 Tailwind CSS 项目中安装 Frutjam UI 库？

确保您的计算机上安装了可用的 Tailwind CSS 项目，以及 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/r​​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 优先方法背后的想法吗？ 了解我们为何以这种方式构建它 →