Tailwind CSS

このスキルは Tailwind CSS v4.1.18 をベースにしており、2026-01-28 に生成されました。

Tailwind CSS は、カスタムユーザーインターフェースを迅速に構築するためのユーティリティファーストの CSS フレームワークです。カスタム CSS を記述する代わりに、マークアップ内でユーティリティクラスを直接組み合わせてデザインを構成します。Tailwind v4 は CSS ファーストの設定とテーマ変数を導入し、デザインシステムのカスタマイズがより簡単になりました。

コアリファレンス

トピック	説明	リファレンス
インストール	Vite、PostCSS、CLI、CDN のセットアップ	core-installation
ユーティリティクラス	Tailwind のユーティリティファーストアプローチと要素のスタイリング	core-utility-classes
テーマ変数	デザイントークン、テーマのカスタマイズ、テーマ変数のネームスペース	core-theme
レスポンシブデザイン	モバイルファーストのブレークポイント、レスポンシブバリアント、コンテナクエリ	core-responsive
バリアント	状態、疑似クラス、メディアクエリバリアントを使用した条件付きユーティリティの適用	core-variants
Preflight	Tailwind の基本スタイルと拡張・無効化の方法	core-preflight

レイアウト

Display・Flexbox・Grid

トピック	説明	リファレンス
Display	flex、grid、block、inline、hidden、sr-only、flow-root、contents	layout-display
Flexbox	flex-direction、justify、items、gap、grow、shrink、wrap、order	layout-flexbox
Grid	grid-cols、grid-rows、gap、place-items、col-span、row-span、subgrid	layout-grid
アスペクト比	レスポンシブメディアの要素アスペクト比の制御	layout-aspect-ratio
カラム	マガジンスタイルまたはマソンリーレイアウト用のマルチカラムレイアウト	layout-columns

ポジショニング

トピック	説明	リファレンス
Position	static、relative、absolute、fixed、sticky でのポジショニング制御	layout-position
Inset	top、right、bottom、left、inset ユーティリティでの位置指定要素の配置制御	layout-inset

サイズ

トピック	説明	リファレンス
幅	スペーシングスケール、分数、コンテナサイズ、ビューポートユニットを使用した要素の幅設定	layout-width
高さ	スペーシングスケール、分数、ビューポートユニット、コンテンツベースのサイジングを使用した要素の高さ設定	layout-height
最小・最大サイズ	min-width、max-width、min-height、max-height の制約	layout-min-max-sizing

スペーシング

トピック	説明	リファレンス
マージン	スペーシングスケール、負の値、論理プロパティ、space ユーティリティを使用した要素のマージン制御	layout-margin
パディング	スペーシングスケール、論理プロパティ、方向別ユーティリティを使用した要素のパディング制御	layout-padding

オーバーフロー

トピック	説明	リファレンス
Overflow	コンテナをオーバーフローするコンテンツの処理方法の制御	layout-overflow

画像・置換要素

トピック	説明	リファレンス
Object Fit・Position	画像とビデオのサイズ変更と位置指定の制御	layout-object-fit-position

テーブル

トピック	説明	リファレンス
テーブルレイアウト	border-collapse、table-auto、table-fixed	layout-tables

トランスフォーム

トピック	説明	リファレンス
Transform Base	トランスフォーム有効化、ハードウェア高速化、カスタムトランスフォーム値のベーストランスフォームユーティリティ	transform-base
Translate	スペーシングスケール、パーセンテージ、カスタム値を使用した x、y、z 軸での要素の移動	transform-translate
Rotate	度数値とカスタム回転を使用した 2D および 3D 空間での要素の回転	transform-rotate
Scale	パーセンテージ値を使用した要素の均一または特定軸へのスケーリング	transform-scale
Skew	度数値を使用した x および y 軸での要素のスキュー	transform-skew

タイポグラフィ

トピック	説明	リファレンス
フォント・テキスト	フォントサイズ、ウェイト、色、行の高さ、文字間隔、装飾、truncate	typography-font-text
テキスト配置	left、center、right、justify、論理プロパティを使用したテキスト配置の制御	typography-text-align
リストスタイル	箇条書きとマーカー用の list-style-type、list-style-position	typography-list-style

ビジュアル

トピック	説明	リファレンス
背景	背景色、グラデーション、画像、サイズ、位置	visual-background
ボーダー	ボーダー幅、色、半径、divide、ring	visual-border
エフェクト	ボックスシャドウ、不透明度、mix-blend、backdrop-blur、filter	visual-effects
SVG	SVG とアイコンのスタイリング用の fill、stroke、stroke-width	visual-svg

エフェクト・インタラクティビティ

トピック	説明	リファレンス
トランジション・アニメーション	CSS トランジション、アニメーションキーフレーム、モーション削減	effects-transition-animation
可視性・インタラクティビティ	visibility、cursor、pointer-events、user-select、z-index	effects-visibility-interactivity
フォームコントロール	accent-color、appearance、caret-color、resize	effects-form-controls
スクロールスナップ	カルーセル用の scroll-snap-type、scroll-snap-align	effects-scroll-snap

フィーチャー

ダークモード

トピック	説明	リファレンス
ダークモード	dark バリアントとカスタム戦略を使用したダークモードの実装	features-dark-mode

マイグレーション

トピック	説明	リファレンス
アップグレードガイド	v3 から v4 への移行、破壊的変更、名前変更マッピング	features-upgrade

カスタマイズ

トピック	説明	リファレンス
カスタムスタイル	カスタムスタイル、ユーティリティ、バリアントの追加、任意の値の操作	features-custom-styles
関数・ディレクティブ	デザインシステムの操作用の Tailwind の CSS ディレクティブと関数	features-functions-directives
コンテンツ検出	Tailwind がクラスを検出する方法とコンテンツスキャンのカスタマイズ	features-content-detection

ベストプラクティス

トピック	説明	リファレンス
ユーティリティパターン	重複の管理、競合、important 修飾子、コンポーネント使用時期	best-practices-utility-patterns

主要推奨事項

• マークアップ内でユーティリティクラスを直接使用する - ユーティリティを組み合わせてデザインを構成する
• テーマ変数でカスタマイズする - @theme ディレクティブを使用してデザイントークンを定義する
• モバイルファーストのレスポンシブデザイン - モバイルには未接頭辞ユーティリティを、ブレークポイントには接頭辞付きを使用する
• 完全なクラス名を使用する - 文字列補間でクラスを動的に構築しない
• バリアントを活用する - 複雑な条件付きスタイリングにはバリアントをスタックさせる
• CSS ファースト設定を優先する - JavaScript 設定より @theme、@utility、@custom-variant を使用する