安装

使用 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 优先方法背后的想法吗？ 了解我们为什么这样构建它 →