tailwind-4-docs

Tailwind 4 ドキュメント

概要

このスキルを使うと、ローカルに同期された Tailwind CSS v4 ドキュメントのスナップショットを参照し、開発、設定、移行、実装、リファクタリング、レビューに関する質問に公式のガイダンスに基づいて回答できます。

ドキュメントのスナップショットはこのスキルに含まれていません。上流リポジトリはソースを入手できますが、オープンソースではないためです。ユーザー自身でスナップショットを初期化し、上流のライセンスを遵守する責任を負います。

クイックスタート

1. ドキュメントのスナップショットが初期化済みか確認します（references/docs/ と references/docs-index.tsx が存在すること）。
2. スナップショットがない場合、または1週間以上前のものである場合は、いったん停止し、続行する前に「初期化」の手順を実行するよう依頼します。スナップショットが初期化されるまで、ユーザーの質問には回答しないでください。
3. トピック（ユーティリティ、バリアント、設定、移行、互換性、実装、リファクタリング、レビュー）を特定します。
4. references/docs-index.tsx で該当するドキュメントを探します。
5. references/docs/ から関連するファイルのみを読み込みます。
6. 実装、リファクタリング、レビューのタスクでは、references/engineering-playbook.md も読み込みます。
7. ガイダンスを適用し、破壊的変更や制約があれば明示します。

初期化（インストールごとに一度必要）

同期スクリプトを実行して、Tailwind のドキュメントをローカルにダウンロードします。ネットワークアクセス、git、Python 3 が必要です。

python skills/tailwind-4-docs/scripts/sync_tailwind_docs.py --accept-docs-license

このスクリプトは tailwindlabs/tailwindcss.com からコンテンツを取得します。このリポジトリはソースを入手できますが、明示的にオープンソースではないため、ユーザーはダウンロード前にライセンスに同意し、スナップショットをローカルに保管する必要があります。

ツールを実行できない場合、またはインターネットにアクセスできない場合は、ターミナルで上記のコマンドを正確に実行するようユーザーに依頼します。その後、references/docs/ と references/docs-index.tsx が存在することを確認してから続行します。

スナップショットがない場合、または1週間以上前のものである場合は、コマンドの実行許可を求めるか、ユーザーに実行を依頼する必要があります。スナップショットが初期化または更新されるまで、Tailwind に関するガイダンスを提供してはいけません。

初期化が妨げられている場合（インターネットに接続できない、または書き込みアクセスがない場合）は、限定的な代替手段として references/gotchas.md を使用し、公式ドキュメントを参照するようユーザーに依頼します。実装、リファクタリング、レビューのタスクでは、限定的な代替手段として references/engineering-playbook.md も使用できます。

参照ファイル一覧

• references/docs/ はローカルで生成され、Tailwind v4 の MDX ドキュメントのスナップショットが含まれています。
• references/docs-index.tsx はローカルで生成され、ドキュメントのサイドバーで使われるカテゴリとスラッグのマップが含まれています。
• references/docs-source.txt には上流リポジトリ、コミット、スナップショットの日付が記録されています（または初期化が保留中であることが示されます）。
• references/engineering-playbook.md はエージェント向けの実装、リファクタリング、レビューのガイドです。
• references/gotchas.md には v4 への移行でよくある落とし穴がまとめられています。

MDX の扱い

• export const title と export const description はメタデータとして扱います。
• <TipInfo> や <TipBad> のような JSX のコールアウトはガイダンスのテキストとして読み取ります。

よく使う参照先

• 移行：references/docs/upgrade-guide.mdx、references/docs/compatibility.mdx。
• 実装／リファクタリング／レビュー：references/engineering-playbook.md。
• 注意点の概要：references/gotchas.md。
• 設定とディレクティブ：references/docs/functions-and-directives.mdx、references/docs/adding-custom-styles.mdx、references/docs/theme.mdx。
• バリアントとレスポンシブパターン：references/docs/hover-focus-and-other-states.mdx、references/docs/responsive-design.mdx。
• コアの動作：references/docs/preflight.mdx、references/docs/detecting-classes-in-source-files.mdx。

移行チェックリスト

v3 から v4 にアップグレードする際は、ドキュメントで以下を必ず確認してください。

• ブラウザーのサポートと互換性に関する要件。
• ツールの変更：@tailwindcss/postcss、@tailwindcss/cli、@tailwindcss/vite。
• インポート構文：@tailwind ディレクティブは @import "tailwindcss" に置き換わります。
• ユーティリティの名称変更や削除、プレフィックスの形式、important 修飾子の配置。
• バリアント、トランスフォーム、任意の値の構文の変更。

更新ワークフロー

scripts/sync_tailwind_docs.py を実行してスナップショットを更新してください。同期を高速化するため、tailwindlabs/tailwindcss.com のローカルクローンがすでにある場合は --local-repo を使用してください。必ず --accept-docs-license を指定してください。

---