Japanese Tailwind Dictionary
🚀 概要
Japanese Tailwind Dictionaryは、TailwindCSSのクラスを日本語で解説したり、CSSや日本語からTailwindのクラス名を検索できる拡張機能です。
- 💡 クラス名・CSS・日本語説明から一発検索!
- 🧩 主要な Tailwind クラスを網羅(色・フォント・装飾・レイアウト・レスポンシブ…)
- 🖱️ エディタ右上のアイコンやコマンドパレットから即アクセス
- 📝 日本語で分かりやすい解説付き
🛠️ 使い方
- クラス逆引き検索
- エディタ右上の 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 など
随時追加予定です
| |