tailwind

Tailwind

手順

• HTML のスタイル設定には Tailwind CSS クラスを使用します。独自に記述する前に、プロジェクト内の既存の Tailwind の規約を確認して使用してください。
• 繰り返し使われるパターンを、プロジェクトの規約（Blade、JSX、Vue など）に沿ったコンポーネントとして切り出すことを提案してください。
• クラスの配置、順序、優先順位、デフォルト値をよく検討してください。冗長なクラスを削除し、繰り返しを抑えられるよう親要素または子要素にクラスを慎重に追加し、要素を論理的にグループ化してください。
• 常に Tailwind CSS v4 を使用してください。非推奨のユーティリティは使用しないでください。
• Tailwind v4 では corePlugins はサポートされていません。

ダークモード

• 既存のページやコンポーネントがダークモードに対応している場合、新しいページやコンポーネントも、通常は dark: を使って同様に対応させてください。

例

• 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 では非推奨のユーティリティが削除されています。非推奨のオプションは使用せず、置き換え後のものを使用してください。
• 不透明度の値は引き続き数値です。

| 非推奨 | 置き換え後 | |------------+--------------| | bg-opacity-_ | bg-black/_ | | text-opacity-_ | text-black/_ | | border-opacity-_ | border-black/_ | | divide-opacity-_ | divide-black/_ | | ring-opacity-_ | ring-black/_ | | placeholder-opacity-_ | placeholder-black/_ | | flex-shrink-_ | shrink-_ | | flex-grow-_ | grow-_ | | overflow-ellipsis | text-ellipsis | | decoration-slice | box-decoration-slice | | decoration-clone | box-decoration-clone |

間隔

• 項目を並べる場合は、間隔にマージンではなく gap ユーティリティを使用してください。