Caution
お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。
辞典
- トップページ
- Tailwind CSS辞典
Tailwind CSS辞典 一覧ページ
| 初心者向け: 概要と特徴、学習順ガイド | ユーティリティファースト・レスポンシブ・カスタマイズの全体像と学習順ガイド。 |
| 【環境構築】Tailwind CSSの開発環境 | CDN・npm（PostCSS）・Vite プラグインの3種類の導入手順。 |
| アニメーションクラス（animate-*） | spin・bounce・pulse などのキーフレームアニメーションクラス群。 |
| @applyディレクティブ | ユーティリティクラスを CSS 内にまとめる @apply ディレクティブ。 |
| Arbitrary Values（任意の値） | w-[200px] のように角括弧で任意の値を直接指定する記法。 |
| 背景色クラス（bg-*） | bg-{color}-{shade} 形式で背景色を設定するクラス群。 |
| ボーダーカラークラス（border-*） | border-{color}-{shade} でボーダー色を設定するクラス群。 |
| 角丸クラス（rounded-*） | rounded-* で要素の角丸を制御するクラス群。 |
| ボーダー幅クラス（border-*） | border・border-{size} でボーダー幅を設定するクラス群。 |
| ボックスシャドウクラス（shadow-*） | shadow・shadow-{size} でボックスシャドウを適用するクラス群。 |
| マルチカラムレイアウト（columns-*） | columns-* で CSS マルチカラム（段組み）レイアウトを実現。 |
| containerクラス（最大幅ラッパー） | ブレークポイントに応じて最大幅を切り替えるレイアウト用クラス。 |
| カスタマイズ（tailwind.config.js） | tailwind.config.js でデザイントークンを拡張・上書き。 |
| ダークモード（dark:プレフィックス） | dark: プレフィックスで適用するダークモードスタイルの仕組み。 |
| 表示クラス（block / flex / grid / hidden） | display プロパティをクラスで制御するユーティリティ群。 |
| 区切り線クラス（divide-*） | divide-x・divide-y で子要素間に区切り線を自動挿入するクラス群。 |
| トランジション時間クラス（duration-*） | duration-* でトランジションの継続時間を設定するクラス群。 |
| イージングクラス（ease-*） | ease-in・ease-out などイージング関数を設定するクラス群。 |
| Flexboxレイアウト（flex / items-* / justify-*） | Flexbox レイアウトを構築するユーティリティクラス群。 |
| フォントファミリークラス（font-sans / serif / mono） | font-sans・serif・mono でフォントを設定するクラス群。 |
| フォントサイズクラス（text-sm / base / lg） | text-sm・xl など font-size と行高を設定するクラス群。 |
| フォントウェイトクラス（font-thin / bold） | font-thin から font-black まで9段階のウェイトクラス群。 |
| 間隔クラス（gap-*） | gap-* で Flex・Grid コンテナの子要素間隔を設定するクラス群。 |
| グラデーションクラス（bg-gradient-to-*） | from-*・to-* を組み合わせてグラデーションを実現するクラス群。 |
| CSS Gridレイアウト（grid / grid-cols-*） | grid・grid-cols-* で CSS Grid を構築するクラス群。 |
| 高さクラス（h-*） | h-* で固定・パーセント・ビューポート単位の高さを設定するクラス群。 |
| 状態バリアント（hover: / focus: / active:） | hover:・focus: などのプレフィックスで状態別スタイルを適用。 |
| @layerディレクティブ（レイヤー管理） | カスタムスタイルを3レイヤーに整理するディレクティブ。 |
| 文字間隔クラス（tracking-*） | tracking-* で文字間隔（letter-spacing）を6段階で設定。 |
| 行の高さクラス（leading-*） | leading-* で行の高さ（line-height）を設定するクラス群。 |
| マージンクラス（m-* / mx-* / my-*） | m-*・mx-*・mt-* など全方向のマージンを設定するクラス群。 |
| 最大・最小高さクラス（max-h-* / min-h-*） | max-h-*・min-h-* で最大・最小高さを設定するクラス群。 |
| 最大・最小幅クラス（max-w-* / min-w-*） | max-w-*・min-w-* で最大・最小幅を設定するクラス群。 |
| 透明度クラス（opacity-*） | opacity-* で透明度を0〜100の5刻みで設定するクラス群。 |
| はみ出しクラス（overflow-auto / hidden） | overflow プロパティをクラスで制御するユーティリティ群。 |
| パディングクラス（p-* / px-* / py-*） | p-*・px-*・pt-* など全方向のパディングを設定するクラス群。 |
| プラグイン（機能拡張） | plugins 配列への関数追加でフレームワーク機能を拡張する仕組み。 |
| 配置クラス（static / relative / absolute） | CSS position プロパティを制御する配置クラス群。 |
| レスポンシブデザイン（sm: / md: / lg:） | sm:・md:・lg: プレフィックスで画面幅別スタイルを切り替える仕組み。 |
| リングクラス（アウトライン ring-*） | ring-* で box-shadow を使ったアウトラインを付けるクラス群。 |
| 子要素間の余白クラス（space-x-* / space-y-*） | space-x-*・space-y-* で子要素間の余白を設定するクラス群。 |
| テキスト揃えクラス（text-left / center / right） | text-align プロパティを設定するクラス群。 |
| テキストカラークラス（text-{color}-{shade}） | text-{color}-{shade} 形式でテキスト色を設定するクラス群。 |
| テキスト装飾クラス（underline / line-through） | underline・line-through など文字装飾を設定するクラス群。 |
| 位置オフセットクラス（top-* / right-* / bottom-* / left-*） | 配置済み要素のオフセット（top/right 等）を設定するクラス群。 |
| トランジションクラス（transition-*） | transition-* でトランジションアニメーションを適用するクラス群。 |
| ユーティリティファーストの設計思想 | 小さなクラスを HTML に直接記述してスタイリングする設計思想。 |
| 幅クラス（w-*） | w-* で固定・パーセント・ビューポート幅など多様な幅を設定するクラス群。 |
| z-indexクラス（z-*） | z-* で要素の重なり順（z-index）を制御するクラス群。 |
シェアする