tailwindcss-development

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 では非推奨のユーティリティが削除されました。以下に示す代替のユーティリティを使用してください。オパシティ値は数値のままです。

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

ダークモード

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

よく使われるパターン

Flexbox レイアウト

グリッドレイアウト

よくある落とし穴

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