tailwindcss-development

Tailwind CSS の開発

ドキュメント

Tailwind CSS v4 の詳細なパターンやドキュメントを確認するには、search-docs を使用してください。

基本的な使い方

• HTML のスタイル設定には Tailwind CSS のクラスを使用してください。新しいパターンを導入する前に、プロジェクト内の既存の 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 では非推奨のユーティリティが削除されています。以下に示す置き換え後のユーティリティを使用してください。不透明度の値は数値のままです。

非推奨	置き換え後
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 ユーティリティを使用してください。

<div class="flex gap-8">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

ダークモード

既存のページやコンポーネントがダークモードに対応している場合、新しいページやコンポーネントも同じ方法で対応させてください。通常は dark: バリアントを使用します。

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
    Content adapts to color scheme
</div>

よくある落とし穴

• 非推奨の v3 ユーティリティ（bg-opacity-、flex-shrink- など）を使用する
• @import "tailwindcss" ではなく @tailwind ディレクティブを使用する
• CSS の @theme ディレクティブではなく tailwind.config.js を使用しようとする
• 兄弟要素間の間隔に gap ユーティリティではなくマージンを使用する
• プロジェクトでダークモードを使用しているのに、ダークモードのバリアントを追加し忘れる