Tailwind CSS 開発
ドキュメント
詳細な Tailwind CSS v4 のパターンやドキュメントについては、search-docs を使用してください。
基本使用法
- Tailwind CSS クラスを使用して HTML をスタイリングします。プロジェクト内の既存の Tailwind 規約を確認し、新しいパターンを導入する前にそれに従ってください。
- 繰り返しのパターンをプロジェクトの規約（例：Blade、JSX、Vue）に合わせたコンポーネントに抽出することを提案してください。
- クラスの配置、順序、優先度、デフォルトに注意してください。冗長なクラスを削除し、親要素や子要素に慎重にクラスを追加して繰り返しを減らし、要素を論理的にグループ化してください。
Tailwind CSS v4 固有の注意点
- 常に Tailwind CSS v4 を使用し、非推奨のユーティリティは避けてください。
corePluginsは Tailwind v4 ではサポートされていません。
CSS ファースト設定
Tailwind v4 では、設定は @theme ディレクティブを使用して CSS ファーストで行います。別途 tailwind.config.js ファイルは必要ありません：
@theme {
--color-brand: oklch(0.72 0.11 178);
}
インポート構文
Tailwind v4 では、v3 で使用していた @tailwind ディレクティブの代わりに、通常の CSS @import 文で Tailwind をインポートします：
- @tailwind base;
- @tailwind components;
- @tailwind utilities;
+ @import "tailwindcss";
置き換えられたユーティリティ
Tailwind v4 では非推奨のユーティリティが削除されました。以下に示す置き換えを使用してください。透明度については、*-opacity-* クラスを削除し、既存の色クラスに値をモディファイアとして追加します：bg-blue-500 bg-opacity-50 は bg-blue-500/50 に、text-white text-opacity-75 は text-white/75 になります。
| 非推奨 | 置き換え |
|---|---|
| bg-opacity-* | bg-{color}/* |
| text-opacity-* | text-{color}/* |
| border-opacity-* | border-{color}/* |
| divide-opacity-* | divide-{color}/* |
| ring-opacity-* | ring-{color}/* |
| placeholder-opacity-* | placeholder-{color}/* |
| flex-shrink-* | shrink-* |
| flex-grow-* | grow-* |
| overflow-ellipsis | text-ellipsis |
| decoration-slice | box-decoration-slice |
| decoration-clone | box-decoration-clone |
スペーシング
兄弟要素間のスペーシングにはマージンではなく gap ユーティリティを使用してください：
<div class="flex gap-8">
<div>アイテム 1</div>
<div>アイテム 2</div>
</div>
ダークモード
既存のページやコンポーネントがダークモードをサポートしている場合、新しいページやコンポーネントも同様にサポートする必要があります。通常は dark: バリアントを使用します：
<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
コンテンツはカラースキームに適応します
</div>
よくある落とし穴
- 非推奨の v3 ユーティリティ（bg-opacity-、flex-shrink- など）の使用
@import "tailwindcss"の代わりに@tailwindディレクティブを使用すること- CSS
@themeディレクティブの代わりにtailwind.config.jsを使用しようとすること - 兄弟要素間のスペーシングに gap ユーティリティの代わりにマージンを使用すること
- プロジェクトがダークモードを使用している場合にダークモードバリアントを追加し忘れること