Tailwind 4 Docs

概要

このスキルを使用して、ローカルに同期された 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. ガイダンスを適用し、重大な変更や制約を明確にします。

初期化 (インストールごとに 1 回必須)

同期スクリプトを実行して 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。
• Gotchas 概要: 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。
• インポート構文: @import "tailwindcss" が @tailwind ディレクティブを置き換えます。
• ユーティリティの名前変更/削除、プレフィックス形式、および重要度修飾子の配置。
• バリアント、トランスフォーム、および任意の値の構文への変更。

アップデートワークフロー

scripts/sync_tailwind_docs.py を実行してスナップショットをリフレッシュします。tailwindlabs/tailwindcss.com のローカルクローンを既に持っている場合は、--local-repo を使用して同期を高速化します。常に --accept-docs-license を渡します。