インストール

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

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

コンピュータ上に動作する Tailwind CSS プロジェクト、および ノード および 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 に相当するものがありません (トースト通知、コンボボックス フィルタリング、カルーセル コントロール)。そのような場合にのみ、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/r​​eact

同じネイティブ 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.2.2/dist/frutjam.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

次のステップ

インストールしたら、ボタン コンポーネントを試して Frutjam の動作を確認するか、完全な コンポーネント ライブラリを調べてください。

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