インストール

CSS 専用の Tailwind CSS UI ライブラリである Frutjam を数分でインストールします。 2 つのインポート、ゼロ JavaScript、すぐに使える WCAG アクセス可能なコンポーネント。 Django、HTMX、Laravel、React、およびあらゆる Tailwind CSS v4 プロジェクトで動作します。

Tailwind CSS プロジェクトに Frutjam UI ライブラリをインストールするにはどうすればよいですか?

動作していることを確認してください 追い風 CSS プロジェクトがインストールされているだけでなく、 ノード および NPM をコンピュータ上にインストールします。 Frutjam は Tailwind バージョン 4 で動作します。

次のコマンドを実行して、frutjam をノード パッケージとしてインストールします。

npm i -D frutjam

フルーツジャムを追加 input.css を使用して @plugin 指令：

1
2

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

JavaScript と React — オプション、必須ではありません

Frutjam は ネイティブ ファーストかつ CSS ファーストです。ボタン、バッジ、カード、フォーム、アラートなどのコンポーネントの大部分は、純粋な HTML と CSS で動作し、JavaScript は必要ありません。次のようなネイティブ HTML 要素 <dialog>, <details>、 そして <input type="checkbox"> ブラウザーがすでにサポートしている対話性を処理します。すべてのコンポーネントはすぐに WCAG AA にアクセスでき、Django、HTMX、Laravel、React、Next.js、およびあらゆるスタックで動作します。

少数のコンポーネントには、ネイティブ HTML に相当するものがありません (トースト通知、コンボボックス フィルタリング、カルーセル コントロール)。そのような場合にのみ、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 呼び出しを囲む Thin 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 バージョンを使用すると、ローカル設定なしで迅速かつ簡単に統合できます。 frutjam のこの CDN バージョンは、運用環境ではなく、開発目的でのみ使用してください。

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>

次のステップ

インストールしたら、試してみてください ボタンコンポーネント Frutjam の動作を確認したり、全体を探索したりするには コンポーネントライブラリ.

Frutjam の CSS ファーストのアプローチの背後にある考え方を理解したいですか? なぜこのように構築したかをお読みください →