Copy as Tailwind はビジュアルデザインと Tailwind CSS コードの橋渡しをします。Web ページ上の任意の要素をクリックするだけで、計算済みの CSS スタイルから生成された同等の Tailwind utility class を即座に取得できます — JSX、Vue テンプレート、または HTML ファイルにそのまま貼り付けられる状態で。
Tailwind CSS で開発するということは、カスタム CSS を書く代わりに utility class で考えることを意味します。しかし、既存のデザイン（競合他社のランディングページ、バニラ CSS で構築されたデザインシステム、クライアントの現行 Web サイトなど）を参照する際に、ビジュアルスタイルを手動で Tailwind クラスに変換するのは手間がかかり、ミスも起きやすいです。Copy as Tailwind はこの作業を完全に自動化します。任意の要素についてブラウザの computed styles を読み取り、デフォルトスケールを使って各プロパティを最も近い Tailwind utility class にマッピングします。色は最も近い Tailwind パレットカラーにマッチし、スペーシング値は最も近い rem ベースの utility にスナップされ、タイポグラフィは text-* および font-* クラスにマッピングされます。出力はコンポーネントに直接貼り付けられる、クリーンな単一行のクラス文字列です。
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
任意の要素をクリックすると、完全な computed CSS がリアルタイムで解析されます。適用可能なすべてのプロパティが同等の Tailwind utility class にマッピングされます — bg-purple-600 から rounded-lg、font-semibold まで。変換はローディングや処理の遅延なく即座に行われます。
単純な文字列置換を行うのではなく、Tailwind のデザインシステムを理解して動作します。12px の padding は p-3 にマッピングされ（カスタム値ではなく）、色は Tailwind パレットの最も近いシェードにマッチし（例：#7c3aed は purple-600 になる）、フォントサイズは text-sm、text-base、text-lg 等にマッピングされます。
生成されたクラス文字列はクリーンな出力パネルに表示されます。Copy ボタンを一度クリックするだけで、文字列全体がクリップボードに入ります — React では className="..."、HTML では class="..."、Vue では :class="..." にそのまま貼り付けられます。
さらに素早いワークフローのために、ページ上の任意の要素を右クリックしてブラウザのコンテキストメニューから「Copy as Tailwind」に直接アクセスできます。DevSuite ドックを開く必要はなく、右クリックしてクリックするだけでクラスがクリップボードに入ります。
単純なマッピングを超えた対応が可能です。ボックスシャドウ（shadow-md、shadow-lg）、グラデーション、ボーダースタイル、flex/grid レイアウトクラス、opacity 値、さらには max-width やアスペクト比といったレスポンシブ対応プロパティも処理します。
ブラウザのデフォルト値と異なるクラスのみが含まれます — 冗長な utility は含まれません。出力は簡潔で本番環境対応であり、継承値やデフォルト値のクラスで膨れ上がることはありません。
Tailwindとしてコピー covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorバニラ CSS や Bootstrap で作られた Web サイトを Tailwind に作り直していますか？既存サイトの主要な各コンポーネントをクリックして Tailwind クラスをコピーし、新しい Tailwind コンポーネントの出発点として活用しましょう。プロパティからクラスへの手動翻訳作業を何時間も節約できます。
別の Web サイトで美しくデザインされたカード、ヒーローセクション、またはナビゲーションを見つけましたか？クリックして Tailwind クラスを取得し、独自バージョンを構築するための参考にしましょう。何十もの CSS プロパティを手動で確認する必要はありません。
Figma や PSD モックアップから新しい Tailwind コンポーネントを作成する際は、まず DevTools でブラウザ上にデザインを実装し、次に Copy as Tailwind で要素をクリックして、手書きする代わりに正確な utility class を取得します。
手書きした CSS 値が実際に有効な Tailwind スケール値にマッピングされるかどうかを確認します。padding: 14px と書いた場合、それが p-3（12px）に丸められるか p-3.5（14px）になるかをツールが示してくれます — 不整合がリリース前に発見されます。
Tailwind を始めたばかりですか？任意の Web ページ上の要素をクリックして、従来の CSS プロパティがどのように utility class に変換されるかを確認しましょう。実際の例を見ながら Tailwind のクラス命名システムをインタラクティブに学べる方法です。
DevSuite Pro のフローティングドックを開き、Copy as Tailwind アイコンをクリックします。ツールが有効になり、要素をクリックできることを示すクロスヘアセレクターにカーソルが変わります。
ページ上の任意の要素をクリックします — ボタン、カード、見出し、ナビゲーションバーなど。要素がハイライトされ、computed CSS が解析されます。生成された Tailwind クラス文字列を表示するフローティングパネルが表示されます。
パネルには論理的なグループに分けられた完全な Tailwind クラス文字列が表示されます。どの CSS プロパティがどの Tailwind クラスにマッピングされたかを正確に確認できます。任意のクラスにホバーすると、それが表すベースの CSS 値が表示されます。
「Copy」ボタンをクリックして完全なクラス文字列を取得します。コンポーネントの className、class 属性、またはテンプレートに直接貼り付けます。標準的な Tailwind セットアップであれば、クラスはすぐに機能します。
DevSuite Pro を無料でインストールして、ブラウザで 39 以上の開発者ツールを利用しましょう。