Japanese Tailwind Dictionary

June 6, 2025 · View on GitHub

🚀 概要

Japanese Tailwind Dictionaryは、TailwindCSSのクラスを日本語で解説したり、CSSや日本語からTailwindのクラス名を検索できる拡張機能です。

  • 💡 クラス名・CSS・日本語説明から一発検索！
  • 🧩 主要な Tailwind クラスを網羅（色・フォント・装飾・レイアウト・レスポンシブ…）
  • 🖱️ エディタ右上のアイコンやコマンドパレットから即アクセス
  • 📝 日本語で分かりやすい解説付き

🛠️ 使い方

  1. クラス逆引き検索
    • エディタ右上の Tailwind アイコンをクリック
    • またはコマンドパレット（Ctrl+Shift+P）で「Tailwind: CSS/日本語説明からクラスを逆引き検索」を探して実行
    • 検索ボックスに「中央揃え」「p-4」「width: 100%」などを入力
    • 一致する Tailwind クラスが一覧表示されます

🏷️ 対応クラス例

  • レイアウト: flex, grid, gap-4, order-2, aspect-video など
  • 色・装飾: bg-red-500, text-blue-700, border-2, rounded-lg, opacity-75 など
  • フォント: font-bold, font-mono, text-xl, tracking-wide, leading-tight など
  • 状態・レスポンシブ: hover:bg-blue-500, md:text-lg, focus:ring-2 など

随時追加予定です