Tailwind Helper は、ウェブページ上の任意の要素を検査し、対応する Tailwind CSS ユーティリティクラスを包括的にカテゴリー別で表示します。単純なクラス文字列とは異なり、Layout・Spacing・Typography・Colors・Borders・Effects のカテゴリーに整理されるため、各クラスが何を制御しているかを正確に把握できます。
Copy as Tailwind がすぐに貼り付けられるクラス文字列を提供するのに対し、Tailwind Helper は深く掘り下げるためのツールです。要素のスタイル構成を Tailwind の観点から完全に理解したい開発者向けに作られています。計算済みの CSS プロパティがそれぞれ Tailwind の対応クラスにマッピングされ、論理的なカテゴリーにグループ化されます。要素が flex レイアウトと items-center の配置を使用し、子要素間に gap-3 を持つ p-5 の padding があり、typography に text-lg font-bold を使用し、bg-slate-900 rounded-lg border border-slate-700 の外観を持つことが一目でわかります。個々のクラスタグをクリックしてそのクラスだけをコピーするか、「Copy All」ですべての文字列を取得できます。カテゴリー別の表示により、すべてをコピーするのではなく、必要なクラスだけを選んで取得できます。
Tailwind クラスは明確なカテゴリーに整理されます。Layout（flex・grid・position）、Spacing（padding・margin・gap）、Typography（font size・weight・color）、Colors（background・text・border）、Borders（radius・width・style）、Effects（shadow・opacity・transform）です。各カテゴリーは折りたたみ可能で明確にラベル付けされています。
button・カード・heading・input・コンテナなど、任意の要素をクリックすると、パネルに完全な Tailwind クラスの内訳が即座に表示されます。何が検査されているかがわかるよう、要素は purple の border でハイライトされます。
各 Tailwind クラスはクリック可能なタグとして表示されます。任意の単一タグ（p-5 や font-bold など）をクリックすると、そのクラスだけがクリップボードにコピーされます。「copied」のアニメーションでアクションが確認できます。1 〜 2 つの特定のクラスだけが必要なときに最適です。
下部の「Copy All Classes」ボタンを押すと、すべての Tailwind クラスがスペース区切りのクリーンな文字列として生成され、クリップボードにコピーされます。className="..." または class="..." に直接貼り付けられます。
すべての値が Tailwind のデフォルトの spacing およびサイジングスケールにマッピングされます。16px の font は text-base、24px の padding は p-6、#7c3aed は purple-600 にマッピングされます。完全一致が存在しない場合は、最も近いスケール値が選択され、その旨が示されます。
パネル内の任意の Tailwind クラスタグにホバーすると、そのタグが生成された元の計算済み CSS の値が表示されます。例えば、「p-5」にホバーすると「padding: 20px」と表示されます。この双方向のビューにより、クラスと実際の CSS の値を結びつけて Tailwind のスケールを学習できます。
Tailwindヘルパー covers the following, organized by category:
flexgridblockinline-flexrelativeabsolutestickyitems-centerjustify-betweengap-*p-* (padding)m-* (margin)px-* py-*mx-autospace-x-*w-* h-*max-w-*min-h-*text-sm / text-base / text-lgfont-normal / font-boldleading-* (line-height)tracking-* (letter-spacing)text-centeruppercasetext-{color}-{shade}bg-{color}-{shade}border-{color}-{shade}opacity-*borderborder-2rounded-* (radius)border-solid / dasheddivide-*shadow-sm / shadow-md / shadow-lgring-*transitionduration-*hover:*フラットなクラス文字列とは異なり、カテゴリー別のビューにより要素の完全な構成を理解できます。カードが flex レイアウト・特定の padding・太字の typography・スレートの background・角丸の border・繊細な shadow を使っていることを、それぞれ独自のセクションで確認できます。
任意のウェブサイトでよくデザインされた要素を検査し、関連するカテゴリーのクラスをコピーして Tailwind プロジェクトで再現します。ある要素からは layout、別の要素からは typography、ブランドパレットから colors を取り込んで — 自由に組み合わせられます。
クラスタグにホバーして CSS のソース値を確認します。このインタラクティブなマッピングは、p-4 が 16px を意味すること、text-lg が 18px であること、purple-600 が #7c3aed であることを学ぶ最速の方法です。任意のウェブサイトを Tailwind の学習教材に変えましょう。
自分の Tailwind 製サイトの要素を検査して、デザインシステムから一貫した spacing・color・typography が使われているか確認します。標準のスケール値（p-3 または p-3.5）にすべき誤った独自値（p-[13px] など）を発見できます。
貼り付けるためのクラス文字列をすぐに必要なときは Copy as Tailwind を使います。内訳を詳しく調べたい、クラスを選択的にコピーしたい、あるいは各 CSS プロパティに対してなぜその Tailwind クラスが選ばれたかを理解したいときは Tailwind Helper を使います。
DevSuite Pro のフローティングドックを開き、Tailwind Helper のアイコンをクリックします。ツールが有効化され、クラスの内訳を表示する準備ができたパネルが右側に表示されます。
ページ上の任意の要素をクリックします。purple の border でハイライトされ、パネルにカテゴリー別の Tailwind クラスが表示されます。各カテゴリー（Layout・Spacing・Typography・Colors・Borders・Effects）がクラスタグ付きのセクションとして表示されます。
カテゴリーを閲覧して要素の完全なスタイル構成を理解します。各クラスはクリック可能なタグで、ホバーするとソースの CSS の値が表示され、クリックするとその個別クラスがコピーされます。
個別のタグをクリックして特定のクラスをコピーするか、下部の「Copy All Classes」ボタンを使ってすべてを 1 つの文字列として取得します。Tailwind コンポーネントに直接貼り付けられます。
ページ上の別の要素をクリックすると、パネルが新しいクラスで即座に更新されます。無効化して再有効化する必要はありません — クリックし続けることで複数の要素を順番に検査できます。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。