メニュー
Tailwind CSS v4 でスタイリングするときに使用する。本プロジェクトで利用している v4 の構文ルール、Breaking Changes、新機能、Theme Configuration などをまとめている。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
GitHub Pull Request を作成するときに使用する。タイトル規約、説明欄テンプレート、各セクションに書くべき内容、ベースブランチ、許可される操作、説明欄に含めるべき情報と禁止事項を定義する。
Figma Dev Mode MCP サーバーからデザインを取り込むときに使用する。アセット参照のルール、アイコンパッケージ追加禁止、プレースホルダー禁止などの注意事項を定義する。
Git コミットメッセージを作成するときに使用する。コミットメッセージ規約と issue 番号の付与ルール、コミット/プッシュ実行時の許可ポリシーを定義する。
SOC 職業分類に基づく
| name | tailwind-styling |
| description | Tailwind CSS v4 でスタイリングするときに使用する。本プロジェクトで利用している v4 の構文ルール、Breaking Changes、新機能、Theme Configuration などをまとめている。 |
このプロジェクトでは Tailwind CSS v4 を利用している。CSS のスタイリングを行う前に、必ず本ガイド（および参照先のドキュメント）に目を通すこと。
設定は JavaScript ではなく CSS の @theme ディレクティブ で行う。
@import "tailwindcss";
@theme {
--font-display: "Satoshi", "sans-serif";
--color-avocado-500: oklch(0.84 0.18 117.33);
}
@tailwind base; @tailwind components; @tailwind utilities; は 廃止。代わりに：
@import "tailwindcss";
| 旧（v3） | 新（v4） |
|---|---|
bg-opacity-50 | bg-black/50 |
text-opacity-50 | text-black/50 |
shadow-sm | shadow-xs |
shadow | shadow-sm |
rounded-sm | rounded-xs |
rounded | rounded-sm |
blur-sm | blur-xs |
outline-none | outline-hidden（旧挙動を維持する場合） |
bg-[--brand-color] | bg-(--brand-color) |
gray-200 → currentColorring 幅のデフォルト：3px → 1pxgray-400 → current color at 50% opacityhover スタイル：@media (hover: hover) のデバイスのみ適用新機能（Container Query / 3D transforms / Gradient enhancements / Shadow enhancements 等）、Theme Configuration、Custom Extensions、Advanced Configuration の詳細は以下を参照：
references/tailwind-css-v4-coding-guidelines.md実装時に該当する箇所を確認すること。