tailwindcss-interactivity

Tailwind CSS v4.3 のインタラクティビティユーティリティに関する完全なリファレンスです。`cursor-*`（標準、リサイズ、ズーム、つかむ動作、特殊なカーソル）、スクロール動作とスナップ（`scroll-smooth`、`scroll-snap-type`／`-align`／`-stop`、`overscroll-*`、v4.2 以降の論理プロパティ `scroll-mbs-*`／`scroll-pbs-*`）、スクロールバーのスタイリング（`scrollbar-*`、`scrollbar-thumb-*`／`scrollbar-track-*`、v4.3 以降の `scrollbar-gutter-*`）、テキスト選択を制御する `select-*`、`pointer-events-*`、`touch-*` アクションユーティリティ、`resize-*`、入力カーソルの色を指定する `caret-*`、チェックボックス／ラジオボタン／範囲入力の色を指定する `accent-*` を扱います。

疑似クラスの状態バリアント（hover:、focus:、active:、disabled:）と、レスポンシブ／ダークモードのプレフィックスとの組み合わせについても説明します。

Tailwind CSS インタラクティビティユーティリティ

Tailwind CSS v4.3 でユーザーのインタラクション動作とカーソルスタイルを制御するための包括的なユーティリティです。

カテゴリー

カーソルユーティリティ

要素上のカーソルの表示を制御します

• cursor-* - 標準的なカーソル（auto、default、pointer、wait、text、move、help、not-allowed、none など）
• リサイズ用カーソルをサポート（col-resize、row-resize、n-resize、e-resize、s-resize、w-resize、ne-resize、nw-resize、se-resize、sw-resize、ew-resize、ns-resize、nesw-resize、nwse-resize）
• ズーム用カーソル（zoom-in、zoom-out）
• つかむ動作のカーソル（grab、grabbing）
• 特殊なカーソル（context-menu、progress、cell、crosshair、vertical-text、alias、copy、no-drop、all-scroll）

スクロール動作とスナップ

スクロールとスナップの動作を管理します

• scroll-smooth - スムーズスクロールを有効にします
• scroll-snap-type - スナップコンテナーの動作を定義します（snap-none、snap-x、snap-y、snap-both）
• scroll-snap-align - スナップ位置を指定します（snap-start、snap-center、snap-end）
• scroll-snap-stop - スナップ停止を強制します（snap-always、snap-normal）
• overscroll-behavior - オーバースクロール領域を制御します（overscroll-auto、overscroll-contain、overscroll-none）
• 軸ごとのバリアント（x、y）をサポート
• 論理ブロック軸のスクロールマージン／パディング（v4.2 以降）：scroll-mbs-*、scroll-mbe-*、scroll-pbs-*、scroll-pbe-*

スクロールバーのスタイリング（v4.3 以降）

• scrollbar-auto、scrollbar-thin、scrollbar-none - scrollbar-width
• scrollbar-thumb-*、scrollbar-track-* - scrollbar-color（不透明度修飾子をサポート。例：scrollbar-thumb-slate-900/60）
• scrollbar-gutter-auto、scrollbar-gutter-stable、scrollbar-gutter-both - レイアウトのずれを防ぐためにスクロールバーのスペースを確保します

ユーザー選択

テキスト選択の動作を制御します

• select-none - テキスト選択を無効にします
• select-text - テキスト選択を許可します
• select-all - クリック時にすべてのテキストを選択します
• select-auto - ブラウザーのデフォルトの選択動作を使用します

ポインターイベント

要素のインタラクティブな動作を制御します

• pointer-events-none - 要素を操作できないようにします
• pointer-events-auto - 要素を操作可能にします（デフォルト）

タッチアクション

タッチジェスチャーの処理方法を定義します

• touch-auto - ブラウザーのデフォルトのタッチ処理を使用します
• touch-none - すべてのタッチ動作を無効にします
• touch-pan-x - 水平方向のパンのみを許可します
• touch-pan-y - 垂直方向のパンのみを許可します
• touch-manipulation - パンとズームのみを許可します（ダブルタップズームは無効）
• 方向別のバリアント（pan-up、pan-down、pan-left、pan-right、pinch-zoom）をサポート

リサイズ

要素のリサイズ動作を制御します

• resize-none - リサイズを無効にします
• resize - 縦横両方向のリサイズを許可します
• resize-y - 垂直方向のみのリサイズを許可します
• resize-x - 水平方向のみのリサイズを許可します

キャレットの色

テキスト入力カーソルの色を設定します

• caret-* - input／textarea のカーソル用カラー ユーティリティ
• Tailwind のすべてのカラーと不透明度修飾子をサポート
• ダークモードを完全にサポート

アクセントカラー

フォームコントロールのアクセントカラーを定義します

• accent-* - チェックボックス、ラジオボタン、範囲入力用のカラー ユーティリティ
• Tailwind のすべてのカラーと不透明度修飾子をサポート
• ダークモードを完全にサポート

疑似クラスの状態バリアント

hover:、focus:、active:、disabled: のプレフィックスを使用して、操作状態に応じた要素のスタイルを設定します。

<button class="bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
  Click me
</button>

<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />

• hover: - マウスをホバーしたときに適用されます
• focus: - 要素がキーボードまたはポインターのフォーカスを受けているときに適用されます
• active: - クリックまたはタップ中に適用されます
• disabled: - 要素に disabled 属性があるときに適用されます
• レスポンシブおよびダークモードのプレフィックスと組み合わせられます：md:hover:bg-blue-700、dark:hover:bg-blue-400

リソース

• Tailwind CSS 公式ドキュメント
• カーソルのドキュメント
• スクロール動作のドキュメント
• スクロールスナップのドキュメント
• スクロールバーの幅、スクロールバーの色、スクロールバーのガター
• ユーザー選択のドキュメント
• ポインターイベントのドキュメント
• タッチ操作のドキュメント
• リサイズのドキュメント
• キャレットの色のドキュメント
• アクセントカラーのドキュメント

詳細なリファレンス

• cursor.md - 特定のカーソル値（リサイズ、ズーム、つかむ、特殊なカーソル）を選ぶときに読み込みます
• scroll.md - スクロールスナップ、スムーズスクロール、オーバースクロールの抑制、またはスクロールバーのスタイルを設定するときに読み込みます
• states.md - フォームコントロールのユーザー選択、ポインターイベント、タッチ操作、リサイズ、キャレットの色、またはアクセントカラーのスタイルを設定するときに読み込みます