tailwindcss

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
Columns	雑誌風またはメイソンリーレイアウト向けのマルチカラムレイアウト	layout-columns

位置指定

トピック	説明	リファレンス
Position	static、relative、absolute、fixed、sticky を使った要素の位置指定	layout-position
Inset	top、right、bottom、left、および inset ユーティリティを使った、位置指定された要素の配置	layout-inset

サイズ

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

余白

トピック	説明	リファレンス
Margin	スペーシングスケール、負の値、論理プロパティ、space ユーティリティを使った要素のマージン調整	layout-margin
Padding	スペーシングスケール、論理プロパティ、方向指定ユーティリティを使った要素のパディング調整	layout-padding

オーバーフロー

トピック	説明	リファレンス
Overflow	コンテナーからあふれるコンテンツを要素がどのように処理するかを調整	layout-overflow

画像・置換要素

トピック	説明	リファレンス
オブジェクトのフィットと位置	画像や動画のサイズ変更と位置指定を調整	layout-object-fit-position

テーブル

トピック	説明	参照
テーブルレイアウト	border-collapse、table-auto、table-fixed	layout-tables

変形

トピック	説明	参照
変形の基本	変形、ハードウェアアクセラレーション、カスタムの変形値を有効にする基本的な変形ユーティリティ	transform-base
移動	間隔スケール、パーセンテージ、カスタム値を使って、x、y、z 軸上で要素を移動	transform-translate
回転	角度の値やカスタム回転を使って、2D および 3D 空間で要素を回転	transform-rotate
拡大・縮小	パーセンテージ値を使って、要素を均等に、または特定の軸上で拡大・縮小	transform-scale
傾斜	角度の値を使って、x 軸と y 軸上で要素を傾斜	transform-skew

タイポグラフィ

トピック	説明	参照
フォントとテキスト	フォントサイズ、太さ、色、行の高さ、文字間隔、装飾、省略表示	typography-font-text
テキストの配置	左揃え、中央揃え、右揃え、両端揃え、および論理プロパティを使ったテキスト配置の制御	typography-text-align
リストスタイル	箇条書きとマーカーのための list-style-type、list-style-position	typography-list-style

ビジュアル

トピック	説明	参照
背景	背景色、グラデーション、画像、サイズ、位置	visual-background
ボーダー	ボーダーの幅、色、角丸、区切り、リング	visual-border
エフェクト	ボックスシャドウ、不透明度、mix-blend、backdrop-blur、フィルター	visual-effects
SVG	SVG とアイコンのスタイル設定のための fill、stroke、stroke-width	visual-svg

エフェクトとインタラクティブ機能

トピック	説明	参照
トランジションとアニメーション	CSS トランジション、アニメーションのキーフレーム、動きを抑える設定	effects-transition-animation
表示とインタラクティブ機能	表示、カーソル、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

ベストプラクティス

トピック	説明	参考資料
ユーティリティパターン	重複や競合の管理、重要な修飾子、コンポーネントを使用するタイミング	best-practices-utility-patterns

主な推奨事項

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