Menu
Tailwind CSS v4 でスタイリングするときに使用する。本プロジェクトで利用している v4 の構文ルール、Breaking Changes、新機能、Theme Configuration などをまとめている。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
GitHub Pull Request を作成するときに使用する。タイトル規約、説明欄テンプレート、各セクションに書くべき内容、ベースブランチ、許可される操作、説明欄に含めるべき情報と禁止事項を定義する。
Figma Dev Mode MCP サーバーからデザインを取り込むときに使用する。アセット参照のルール、アイコンパッケージ追加禁止、プレースホルダー禁止などの注意事項を定義する。
Git コミットメッセージを作成するときに使用する。コミットメッセージ規約と issue 番号の付与ルール、コミット/プッシュ実行時の許可ポリシーを定義する。
Based on SOC occupation classification
| 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実装時に該当する箇所を確認すること。