Open1

Tailwind 学習帳

tyoyotyoyo

Tailwind CSS を 英語学習のように頻出する文をならべて逐語訳+意訳で学んでみようという試みです

【基礎レイアウト編】

1. flex items-center justify-center

  • 直訳：「フレックス配置・縦方向中央揃え・横方向中央揃え」
  • 意訳：「フレックスコンテナにして、縦横両方向で中央揃えにする」
  • 実用：ボタンやカードの中身を真ん中に配置する時の定番

2. w-full h-screen

  • 直訳：「幅を親要素いっぱい・高さを画面の高さいっぱい」
  • 意訳：「幅を画面いっぱい、高さを画面の高さいっぱいにする」
  • 実用：ヒーローセクションやランディングページの全画面表示

3. container mx-auto px-4

  • 直訳：「コンテナサイズ制限・左右マージンを自動で中央寄せ・左右に内側余白4単位」
  • 意訳：「コンテナを中央寄せにして、左右に適度な余白を付ける」
  • 実用：サイト全体の横幅を制限して見やすくする基本パターン

4. grid grid-cols-3 gap-6

  • 直訳：「グリッド配置・3列のカラム設定・要素間隔を6単位」
  • 意訳：「3列のグリッドレイアウトで、各要素間に適度な間隔を空ける」
  • 実用：商品一覧やギャラリー表示の定番レイアウト

5. flex flex-col space-y-4

  • 直訳：「フレックス配置・縦方向配置・縦間隔を4単位ずつ」
  • 意訳：「縦並びのフレックスレイアウトで、各要素間に縦の間隔を作る」
  • 実用：フォームの入力項目を縦に並べる時によく使う

【コンポーネントスタイリング編】

6. bg-white shadow-lg rounded-xl p-6

  • 直訳：「背景を白色・大きな立体影・角丸を特大サイズ・全方向内側余白6単位」
  • 意訳：「白背景に大きな影を付けて、角を丸くし、内側に十分な余白を取る」
  • 実用：モダンなカードコンポーネントの基本形

7. text-gray-600 text-sm font-medium

  • 直訳：「文字色を中程度のグレー・文字サイズを小さく・文字の太さを中程度」
  • 意訳：「やや薄いグレーで、小さめの文字を中程度の太さで表示」
  • 実用：サブタイトルや説明文によく使われるスタイル

8. border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200

  • 直訳：「1px境界線・境界線を薄いグレー・フォーカス時境界線を青色・フォーカス時2px幅のリング・フォーカス時リングを薄い青」
  • 意訳：「通常は薄いグレーの枠線、フォーカス時は青い枠線と薄い青いリングで強調」
  • 実用：入力フィールドの標準的なフォーカス表現

9. hover:bg-blue-700 transition-colors duration-200

  • 直訳：「ホバー時背景を濃い青・色変化を滑らか・変化時間を200ミリ秒」
  • 意訳：「マウスを乗せた時に背景を濃い青に変化させ、0.2秒かけて滑らかに変化」
  • 実用：ボタンのホバーエフェクトの定番

10. absolute top-0 right-0 m-4

  • 直訳：「絶対位置配置・上端から0・右端から0・全方向外側余白4単位」
  • 意訳：「絶対位置で右上角に配置し、端から少し内側に余白を取る」
  • 実用：通知バッジや閉じるボタンの配置

【レスポンシブ対応編】

11. hidden md:block

  • 直訳：「要素を非表示・中サイズ画面以上でブロック表示」
  • 意訳：「スマホでは非表示、タブレット以上のサイズで表示」
  • 実用：PCでは表示したいがスマホでは邪魔になる要素

12. text-lg md:text-xl lg:text-2xl

  • 直訳：「文字サイズを大きく・中サイズ画面以上で特大文字・大サイズ画面以上で2倍大文字」
  • 意訳：「画面サイズに応じて文字サイズを段階的に大きくする」
  • 実用：見出しを画面サイズに応じて適切な大きさに調整

13. grid-cols-1 sm:grid-cols-2 lg:grid-cols-4

  • 直訳：「1列グリッド・小サイズ画面以上で2列・大サイズ画面以上で4列」
  • 意訳：「スマホでは1列、タブレットでは2列、PCでは4列のレイアウト」
  • 実用：商品グリッドやカードレイアウトの王道パターン

14. px-4 md:px-8 lg:px-12

  • 直訳：「左右内側余白4単位・中サイズ画面以上で8単位・大サイズ画面以上で12単位」
  • 意訳：「画面が大きくなるにつれて左右の余白を段階的に増やす」
  • 実用：コンテンツ領域の余白を画面サイズに応じて最適化

15. flex-col md:flex-row

  • 直訳：「フレックスを縦方向・中サイズ画面以上で横方向」
  • 意訳：「スマホでは縦並び、タブレット以上では横並びに変更」
  • 実用：サイドバーとメインコンテンツの配置切り替え

【状態とインタラクション編】

16. opacity-0 hover:opacity-100 transition-opacity

  • 直訳：「透明度を0（完全透明）・ホバー時透明度を100（完全不透明）・透明度変化を滑らか」
  • 意訳：「通常は透明、マウスを乗せると滑らかに不透明になる」
  • 実用：オーバーレイ効果やツールチップの表示

17. transform hover:scale-105 transition-transform

  • 直訳：「変形効果適用・ホバー時105%拡大・変形変化を滑らか」
  • 意訳：「マウスを乗せると要素が少し拡大される効果」
  • 実用：カードやボタンにマウスオーバー時の動きを付ける

18. bg-gray-100 hover:bg-gray-200 active:bg-gray-300

  • 直訳：「背景を薄いグレー・ホバー時やや濃いグレー・クリック時さらに濃いグレー」
  • 意訳：「通常は薄いグレー、マウスオーバーで少し濃く、クリック時はさらに濃く」
  • 実用：ボタンの3段階の状態表現

19. cursor-pointer select-none

  • 直訳：「マウスカーソルを指型・テキスト選択を無効化」
  • 意訳：「マウスカーソルを指型にして、テキスト選択を無効にする」
  • 実用：ボタンやクリッカブルな要素に付ける基本設定

20. disabled:opacity-50 disabled:cursor-not-allowed

  • 直訳：「無効状態時透明度50%・無効状態時カーソルを禁止マーク」
  • 意訳：「無効状態では半透明にして、禁止カーソルを表示」
  • 実用：フォームのボタンやフィールドの無効状態表現

【配色とビジュアル編】

21. bg-gradient-to-r from-blue-500 to-purple-600

  • 直訳：「背景グラデーションを右方向・開始色を青・終了色を紫」
  • 意訳：「左から右に向かって青から紫へのグラデーション背景」
  • 実用：モダンなヒーローセクションやボタンの装飾

22. text-white drop-shadow-lg

  • 直訳：「文字色を白・文字に大きなドロップシャドウ」
  • 意訳：「白い文字に大きな影を付けて立体感を演出」
  • 実用：背景画像の上に文字を重ねる時の可読性向上

23. ring-4 ring-blue-500 ring-opacity-50

  • 直訳：「4px幅のリング枠線・リング色を青・リング透明度50%」
  • 意訳：「青い色の半透明なリング状の枠を4px幅で付ける」
  • 実用：フォーカス時やアクティブ状態の強調表現

24. backdrop-blur-sm bg-white/80

  • 直訳：「背景をわずかにぼかし・背景を80%透明な白」
  • 意訳：「背景をぼかして、80%透明な白を重ねる」
  • 実用：モーダルやオーバーレイのガラス効果

25. border-l-4 border-blue-500

  • 直訳：「左境界線を4px幅・境界線色を青」
  • 意訳：「左端に4pxの青いラインを引く」
  • 実用：引用文やアラートボックスのアクセント

【フォームとテーブル編】

26. appearance-none outline-none focus:ring-2

  • 直訳：「ブラウザ標準外観を削除・デフォルトアウトラインを削除・フォーカス時2px幅リング表示」
  • 意訳：「デフォルトスタイルを削除して、フォーカス時にリングで強調」
  • 実用：カスタムスタイルの入力フィールド作成

27. placeholder-gray-400 focus:placeholder-gray-600

  • 直訳：「プレースホルダー色を薄いグレー・フォーカス時プレースホルダー色をやや濃いグレー」
  • 意訳：「通常は薄いグレーのプレースホルダー、フォーカス時は少し濃く」
  • 実用：入力フィールドのプレースホルダーテキストの調整

28. table-auto w-full border-collapse

  • 直訳：「テーブル幅を内容に合わせて自動調整・幅を親要素いっぱい・境界線を重ねて表示」
  • 意訳：「幅を画面いっぱいに使い、罫線を重ねずに表示する自動サイズテーブル」
  • 実用：データテーブルの基本設定

29. odd:bg-gray-50 even:bg-white

  • 直訳：「奇数番目要素の背景を薄いグレー・偶数番目要素の背景を白」
  • 意訳：「奇数行は薄いグレー、偶数行は白でストライプ模様を作る」
  • 実用：テーブル行の交互背景色（ゼブラストライプ）

30. sticky top-0 z-10 bg-white

  • 直訳：「スクロール時に画面上端に固定・上端から0の位置・重ね順を10・背景を白」
  • 意訳：「画面上端に固定して、他の要素より前面に白背景で表示」
  • 実用：スクロール時も見える固定ヘッダー

【アニメーションとエフェクト編】

31. animate-pulse bg-gray-200

  • 直訳：「脈打つようなアニメーション・薄いグレー背景」
  • 意訳：「薄いグレーの背景がゆっくりと明滅を繰り返す」
  • 実用：コンテンツ読み込み中のスケルトン表示

32. animate-bounce delay-150

  • 直訳：「跳ねるアニメーション・150ミリ秒遅延開始」
  • 意訳：「少し時間を空けてから要素がぽんぽん跳ねる動きを開始」
  • 実用：注意を引きたいアイコンやボタンの演出

33. transition-all duration-300 ease-in-out

  • 直訳：「全プロパティを滑らか変化・300ミリ秒かけて・緩急付きで」
  • 意訳：「すべての変化を0.3秒かけてゆっくり始まりゆっくり終わる動きで」
  • 実用：ホバー時の変化を自然で心地良い動きにする

34. scale-0 group-hover:scale-100

  • 直訳：「サイズを0倍・親要素ホバー時にサイズを等倍」
  • 意訳：「通常は見えないサイズ、親にマウスを乗せると通常サイズで現れる」
  • 実用：カードにマウスを乗せるとツールチップが出現する効果

35. rotate-45 hover:rotate-90

  • 直訳：「45度回転・ホバー時に90度回転」
  • 意訳：「最初は斜めに傾いていて、マウスを乗せると直角まで回転」
  • 実用：矢印アイコンやメニューボタンの動的な変化

【高度なレイアウト編】

36. min-h-screen flex flex-col

  • 直訳：「最低でも画面高さ・縦方向フレックス配置」
  • 意訳：「画面の高さを最低限確保して、中身を縦に積み重ねる構造」
  • 実用：フッターを画面下端に固定するページ全体レイアウト

37. flex-1 overflow-auto

  • 直訳：「余った空間を全て使用・内容が溢れたらスクロール可能」
  • 意訳：「利用可能な領域を最大限使い、内容が多い時は自動スクロール」
  • 実用：サイドバーとメイン領域のうち、メイン領域の設定

38. aspect-square object-cover

  • 直訳：「正方形の縦横比を維持・画像を切り抜いてフィット」
  • 意訳：「どんな画像も正方形に収まるよう、はみ出す部分をカットして表示」
  • 実用：商品画像やプロフィール画像を統一されたサイズで表示

39. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))

  • 直訳：「最小300px幅で自動的に列数を調整するグリッド」
  • 意訳：「300px以上の幅を保ちながら、画面幅に応じて列数が自動変化」
  • 実用：カードが画面幅に応じて自動的に並び数を調整するレイアウト

40. space-between items-baseline

  • 直訳：「両端配置・文字のベースライン揃え」
  • 意訳：「要素を左右の端に配置し、文字の下線位置で高さを揃える」
  • 実用：価格表示で金額と通貨単位の大きさが違う時の調整

【フォーカスとアクセシビリティ編】

41. focus:outline-none focus-visible:ring-2

  • 直訳：「フォーカス時のデフォルト枠線なし・キーボード操作時に太めのリング表示」
  • 意訳：「マウスクリック時は枠線なし、キーボード操作時のみ分かりやすい枠線」
  • 実用：アクセシビリティを保ちながらデザインを美しく保つ設定

42. sr-only focus:not-sr-only

  • 直訳：「スクリーンリーダー専用表示・フォーカス時は通常表示」
  • 意訳：「普段は視覚的に隠すが、スクリーンリーダーには読まれる、フォーカス時は表示」
  • 実用：「メインコンテンツにスキップ」リンクなどのバリアフリー対応

43. tabindex="0" focus:z-50

  • 直訳：「キーボード操作の順番に含める・フォーカス時は最前面に表示」
  • 意訳：「キーボードのタブキーで選択可能にし、選択時は他の要素より前に表示」
  • 実用：ドロップダウンメニューのキーボード操作対応

44. aria-expanded group-focus:ring-4

  • 直訳：「展開状態を支援技術に伝える・グループフォーカス時に太いリング表示」
  • 意訳：「開閉状態を音声読み上げに伝え、操作中は分かりやすいリングで強調」
  • 実用：アコーディオンやドロップダウンのアクセシビリティ対応

45. motion-reduce:transform-none

  • 直訳：「アニメーション設定オフ時は変形効果なし」
  • 意訳：「ユーザーがアニメーション無効設定の場合は動きを止める」
  • 実用：めまいや注意障害のあるユーザーへの配慮

【モバイル最適化編】

46. touch-pan-y overscroll-contain

  • 直訳：「縦方向タッチスクロール許可・スクロール範囲を要素内に制限」
  • 意訳：「縦スクロールは可能だが、スクロールが親要素に伝播しない」
  • 実用：モーダル内のスクロールが背景ページに影響しないようにする

47. text-base leading-relaxed tracking-wide

  • 直訳：「標準文字サイズ・ゆったりした行間・文字間隔を広く」
  • 意訳：「読みやすさを重視して、行間と文字間を広めに取った文字設定」
  • 実用：モバイルでの長文コンテンツの可読性向上

48. safe-area-inset-top safe-area-inset-bottom

  • 直訳：「画面上部の安全領域を考慮・画面下部の安全領域を考慮」
  • 意訳：「iPhone のノッチや、ホームバー領域を避けて表示」
  • 実用：全画面表示アプリでのコンテンツ領域の適切な配置

49. snap-x snap-mandatory scroll-smooth

  • 直訳：「横方向にスナップ・強制的にスナップ・滑らかスクロール」
  • 意訳：「横スクロール時に特定位置で自動的に止まる、滑らかな動きで」
  • 実用：カルーセルやタブ切り替えのスワイプ操作

50. will-change-transform backface-hidden

  • 直訳：「変形処理の最適化準備・裏面を非表示」
  • 意訳：「アニメーション性能を向上させ、3D回転時の裏面表示を防ぐ」
  • 実用：滑らかなアニメーションが必要なモバイル UI コンポーネント

【ダークモード対応編】

51. bg-white dark:bg-gray-900 text-black dark:text-white

  • 直訳：「通常時白背景・ダークモード時濃いグレー背景・通常時黒文字・ダークモード時白文字」
  • 意訳：「ライトモードでは白背景に黒文字、ダークモードでは暗い背景に白文字」
  • 実用：テーマ切り替えに対応した基本的な背景と文字色設定

52. border-gray-200 dark:border-gray-700

  • 直訳：「通常時薄いグレー境界線・ダークモード時濃いグレー境界線」
  • 意訳：「ライトモードでは薄い境界線、ダークモードでは濃い境界線で視認性確保」
  • 実用：カードやセクション区切り線のテーマ対応

53. hover:bg-gray-100 dark:hover:bg-gray-800

  • 直訳：「ホバー時薄いグレー背景・ダークモードホバー時濃いグレー背景」
  • 意訳：「マウスオーバー時の背景色をテーマに応じて適切な濃さに変更」
  • 実用：ボタンやリンクのホバー効果をテーマ別に最適化

54. shadow-lg dark:shadow-gray-800/25

  • 直訳：「大きな影・ダークモード時はグレー系の薄い影」
  • 意訳：「通常は標準の影、ダークモードでは暗い背景に映える専用の影」
  • 実用：カードやモーダルの立体感をテーマに関わらず維持

55. ring-blue-500 dark:ring-blue-400

  • 直訳：「青いリング枠線・ダークモード時は明るい青のリング枠線」
  • 意訳：「フォーカス時のリング色をテーマの背景に合わせて調整」
  • 実用：入力フィールドのフォーカス表示をテーマ別に最適化

【フィルターとエフェクト編】

56. blur-sm backdrop-blur-md

  • 直訳：「要素自体を軽くぼかし・背景を中程度にぼかし」
  • 意訳：「要素をほんのりぼかして、その背景もぼかし効果を適用」
  • 実用：モーダルの背景やガラス風デザインエフェクト

57. grayscale hover:grayscale-0 transition-all

  • 直訳：「グレースケール化・ホバー時グレースケール解除・全変化を滑らかに」
  • 意訳：「通常は白黒表示、マウスを乗せると滑らかにカラー表示に戻る」
  • 実用：ギャラリーや商品一覧での画像ホバーエフェクト

58. brightness-75 contrast-125 saturate-150

  • 直訳：「明度を75%に・コントラストを125%に・彩度を150%に」
  • 意訳：「画像を少し暗くして、コントラストと色鮮やかさを強調」
  • 実用：写真の印象を動的に調整するフィルター効果

59. drop-shadow-2xl filter

  • 直訳：「非常に大きな立体影・フィルター効果適用」
  • 意訳：「要素に大きくて立体的な影を付けて浮き上がって見せる」
  • 実用：重要なカードやアイコンに存在感を持たせる

【擬似要素とコンテンツ編】

60. before:content-[''] before:absolute before:inset-0

  • 直訳：「前擬似要素に空のコンテンツ・前擬似要素を絶対配置・前擬似要素を全面に配置」
  • 意訳：「要素の前に見えない層を重ねて、装飾やエフェクトの土台を作る」
  • 実用：オーバーレイ効果やボーダー装飾の基盤

61. after:content-['→'] after:ml-2 after:transition-transform after:hover:translate-x-1

  • 直訳：「後擬似要素に矢印・後擬似要素に左余白・後擬似要素の変形を滑らか変化・後擬似要素ホバー時右移動」
  • 意訳：「要素の後ろに矢印を追加し、ホバー時に右にスライドする動き」
  • 実用：「もっと見る」リンクや次へボタンの動的な矢印表示

62. empty:hidden not-empty:block

  • 直訳：「空の時は非表示・空でない時はブロック表示」
  • 意訳：「内容がある時だけ表示して、空の時は完全に隠す」
  • 実用：動的コンテンツの条件付き表示制御

【グループとピア操作編】

63. group-hover:translate-y-0 group-hover:opacity-100

  • 直訳：「グループホバー時縦位置リセット・グループホバー時完全不透明」
  • 意訳：「親要素にマウスを乗せると、下から現れて完全に表示される」
  • 実用：カードホバー時のアクションボタン表示

64. peer-checked:bg-blue-500 peer-focus:ring-2

  • 直訳：「ピア要素チェック時青背景・ピア要素フォーカス時リング表示」
  • 意訳：「関連する要素がチェックされたら青背景、フォーカスされたらリング表示」
  • 実用：カスタムチェックボックスやラジオボタンのスタイリング

65. peer-invalid:text-red-500 peer-valid:text-green-500

  • 直訳：「ピア要素無効時赤文字・ピア要素有効時緑文字」
  • 意訳：「関連入力が無効なら赤、有効なら緑でメッセージを表示」
  • 実用：フォームバリデーションの視覚的フィードバック

【高度なグリッドとフレックス編】

66. col-span-2 row-span-3 col-start-2

  • 直訳：「2列にまたがり・3行にまたがり・2列目から開始」
  • 意訳：「グリッドで横2マス、縦3マス使用し、左から2番目の列から配置」
  • 実用：雑誌風レイアウトやダッシュボードの可変サイズカード

67. grid-flow-col auto-cols-max

  • 直訳：「グリッドを列方向に流す・列幅を内容に合わせて自動調整」
  • 意訳：「横方向に要素を並べて、各列の幅は中身に応じて最適化」
  • 実用：タグ一覧や水平ナビゲーションの自動幅調整

68. order-last flex-shrink-0 flex-grow

  • 直訳：「表示順序を最後に・縮小不可・余った空間で拡大」
  • 意訳：「他の要素より後に表示し、最小サイズを保ちつつ余白を埋める」
  • 実用：フッター固定やサイドバーの動的サイズ調整

69. place-items-center place-content-between

  • 直訳：「各アイテムを中央配置・全体コンテンツを両端配置」
  • 意訳：「個々の要素は中央揃えで、全体は端から端まで均等配置」
  • 実用：カードグリッドでの美しい配置バランス

【テキストと文字詳細編】

70. text-ellipsis overflow-hidden whitespace-nowrap

  • 直訳：「省略記号表示・はみ出し隠す・改行禁止」
  • 意訳：「長い文字列を一行に収めて、入らない部分は…で省略表示」
  • 実用：カードタイトルやリスト項目の文字溢れ対策

71. whitespace-pre-line break-words hyphens-auto

  • 直訳：「改行コードを保持・長い単語を強制改行・自動ハイフン挿入」
  • 意訳：「元の改行を維持し、長い単語は適切に分割してハイフン付きで表示」
  • 実用：長文コンテンツやコメント表示の読みやすさ向上

72. text-justify indent-8 first-line:font-bold

  • 直訳：「両端揃え・8単位字下げ・最初の行を太字」
  • 意訳：「文章を左右均等に配置し、段落開始を字下げして最初の行を強調」
  • 実用：記事本文や書籍風レイアウトの段落スタイリング

73. uppercase tracking-widest font-mono

  • 直訳：「大文字変換・文字間隔最大・等幅フォント」
  • 意訳：「すべて大文字で、文字間を広く取り、等幅フォントで表示」
  • 実用：見出しやロゴ、コード表示でのインパクトある文字表現

【背景とボーダー詳細編】

74. bg-fixed bg-center bg-cover bg-no-repeat

  • 直訳：「背景固定・背景中央配置・背景を要素全体にカバー・背景繰り返しなし」
  • 意訳：「スクロールしても動かない背景画像を、中央寄せで全体を覆うように一度だけ表示」
  • 実用：ヒーローセクションのパララックス効果

75. bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500

  • 直訳：「背景を文字形でクリップ・文字を透明・右向けグラデーション・ピンクから紫へ」
  • 意訳：「文字の形に切り抜いたグラデーション背景で、虹色の文字効果を作成」
  • 実用：タイトルやロゴのカラフルで目を引く装飾

76. divide-y divide-gray-200 divide-solid

  • 直訳：「縦方向に分割線・グレーの分割線・実線の分割線」
  • 意訳：「要素間に横向きのグレー実線で区切り線を自動挿入」
  • 実用：リスト項目やメニュー項目の自動区切り線

77. border-dashed border-l-8 border-r-0

  • 直訳：「破線ボーダー・左に8px幅ボーダー・右ボーダーなし」
  • 意訳：「左端にだけ太い破線の境界線を引き、右端には境界線なし」
  • 実用：サイドバーやクォート要素のアクセント装飾

【ポジションと配置詳細編】

78. inset-y-0 left-4 right-auto

  • 直訳：「上下位置を0・左位置を4単位・右位置を自動」
  • 意訳：「上下は画面端に合わせ、左から少し内側に配置、右側は自由」
  • 実用：サイドバーや固定メニューの配置調整

79. float-left clear-both

  • 直訳：「左寄せ浮動・両側の浮動をクリア」
  • 意訳：「要素を左に浮かべて、その後の要素は浮動の影響を受けない」
  • 実用：記事内の画像回り込みレイアウト

80. isolation-isolate mix-blend-multiply

  • 直訳：「新しい重ね合わせコンテキスト作成・乗算ブレンドモード」
  • 意訳：「要素を独立した層にして、背景と乗算で色を合成」
  • 実用：写真に文字やグラフィックを重ねる際の色合成効果

【フォームとインタラクション詳細編】

81. appearance-none resize-none caret-blue-500

  • 直訳：「デフォルト外観削除・サイズ変更不可・青いカーソル」
  • 意訳：「ブラウザ標準デザインを無効化し、リサイズ不可で青いテキストカーソル」
  • 実用：カスタムデザインの入力フィールドやテキストエリア

82. file:bg-blue-500 file:text-white file:border-0 file:rounded-md

  • 直訳：「ファイル選択ボタンを青背景・ファイル選択ボタンを白文字・ファイル選択ボタンの境界線なし・ファイル選択ボタンを角丸」
  • 意訳：「ファイル選択ボタンだけを青いボタン風にカスタマイズ」
  • 実用：ファイルアップロード機能の見た目向上

83. accent-pink-500 focus:accent-pink-700

  • 直訳：「アクセント色をピンク・フォーカス時アクセント色を濃いピンク」
  • 意訳：「チェックボックスやラジオボタンの選択色をピンクに、操作時は濃いピンクに」
  • 実用：フォーム要素のブランドカラー統一

【スクロールと画面制御編】

84. scroll-smooth overscroll-y-contain scroll-snap-y snap-mandatory

  • 直訳：「滑らかスクロール・縦スクロール範囲制限・縦方向スナップ・強制スナップ」
  • 意訳：「スクロールを滑らかにし、縦スクロールの伝播を防ぎ、特定位置で止まる」
  • 実用：セクション単位でのページスクロールやモーダル内スクロール

85. snap-start snap-always

  • 直訳：「要素の開始位置でスナップ・常にスナップ動作」
  • 意訳：「スクロール時に要素の先頭位置で必ず止まる設定」
  • 実用：カルーセルやステップ形式コンテンツの区切り

86. scroll-mt-20 scroll-pt-16

  • 直訳：「スクロール時上マージン20・スクロール時上パディング16」
  • 意訳：「リンクで飛んだ時に固定ヘッダー分の余白を自動確保」
  • 実用：アンカーリンク先が固定ヘッダーに隠れない調整

【印刷とメディア対応編】

87. print:hidden print:text-black print:bg-white

  • 直訳：「印刷時非表示・印刷時黒文字・印刷時白背景」
  • 意訳：「画面では表示するが印刷時は隠す、または印刷用に白黒調整」
  • 実用：印刷時に不要な装飾を隠し、読みやすい白黒レイアウトに変更

88. motion-safe:animate-spin motion-reduce:animate-none

  • 直訳：「アニメーション許可時回転・アニメーション制限時動きなし」
  • 意訳：「ユーザーがアニメーション有効なら回転、無効設定なら静止」
  • 実用：アクセシビリティ設定に配慮したローディングアニメーション

【特殊効果と最終編】

89. backdrop-invert backdrop-sepia backdrop-hue-rotate-90

  • 直訳：「背景色反転・背景セピア化・背景色相90度回転」
  • 意訳：「背景をネガフィルムのように反転し、セピア調にして色相を変更」
  • 実用：写真ギャラリーやアート系サイトの特殊視覚効果

90. contain-layout contain-size contain-paint

  • 直訳：「レイアウト影響範囲制限・サイズ影響範囲制限・描画影響範囲制限」
  • 意訳：「要素の変更が他の部分に影響しないよう、レンダリング範囲を制限」
  • 実用：大きなページでの描画性能最適化

91. supports-grid:grid supports-grid:grid-cols-3

  • 直訳：「グリッド対応時グリッド表示・グリッド対応時3列グリッド」
  • 意訳：「ブラウザがグリッドに対応していれば3列グリッド、未対応なら別レイアウト」
  • 実用：古いブラウザとの互換性を保つ段階的機能向上

92. selection:bg-pink-200 selection:text-pink-900

  • 直訳：「選択範囲背景をピンク・選択範囲文字を濃いピンク」
  • 意訳：「ユーザーがテキスト選択した時の背景と文字色をカスタマイズ」
  • 実用：ブランドカラーに合わせた文字選択時の見た目統一

93. marker:text-blue-500 list-inside list-decimal

  • 直訳：「リストマーカーを青・リストマーカーを内側・リスト番号を数字」
  • 意訳：「番号付きリストのマーカーを青色にして、内容の内側に配置」
  • 実用：見た目の良いナンバリングリストやステップ表示

94. placeholder-shown:border-gray-300 not-placeholder-shown:border-blue-500

  • 直訳：「プレースホルダー表示時グレー境界線・プレースホルダー非表示時青境界線」
  • 意訳：「入力前は薄いグレー枠、文字入力中は青い枠で状態を表現」
  • 実用：入力フィールドの状態を分かりやすく視覚化

95. autofill:bg-yellow-200 autofill:text-black

  • 直訳：「自動入力時黄色背景・自動入力時黒文字」
  • 意訳：「ブラウザの自動入力機能使用時の背景と文字色をカスタマイズ」
  • 実用：自動入力時のデフォルト青背景を自分のデザインに合わせる

96. read-only:bg-gray-100 read-write:bg-white

  • 直訳：「読み取り専用時グレー背景・読み書き可能時白背景」
  • 意訳：「編集不可の項目は薄いグレー、編集可能な項目は白背景で区別」
  • 実用：フォームの編集可/不可状態の明確な視覚的区別

97. target:bg-yellow-100 target:border-yellow-500

  • 直訳：「リンクターゲット時黄色背景・リンクターゲット時黄色境界線」
  • 意訳：「URLのアンカーリンクで飛んできた要素を黄色でハイライト」
  • 実用：ページ内リンクで飛んだ先の要素を一時的に強調表示

98. invalid:border-red-500 valid:border-green-500

  • 直訳：「無効時赤境界線・有効時緑境界線」
  • 意訳：「入力内容が無効なら赤枠、有効なら緑枠でリアルタイム表示」
  • 実用：HTML5バリデーションと連動したフォームの即座フィードバック

99. open:bg-blue-50 open:ring-2 open:ring-blue-500

  • 直訳：「開いている時薄い青背景・開いている時リング2・開いている時青リング」
  • 意訳：「details要素やダイアログが開いている時の背景と枠線表示」
  • 実用：アコーディオンやモーダルの開閉状態の視覚的表現

100. rtl:text-right rtl:border-r-4 rtl:border-l-0 ltr:text-left

  • 直訳：「右から左言語時右揃え・右から左言語時右境界線4・右から左言語時左境界線なし・左から右言語時左揃え」
  • 意訳：「アラビア語等の右から左に読む言語では右揃えと右ボーダー、通常言語では左揃え」
  • 実用：多言語対応サイトでの文字方向とレイアウトの自動調整