Tailfind は HTML と CSS を Tailwind CSS に変換できますか?

はい。HTML フラグメントとその CSS を貼り付けると、Tailfind が結果をレンダリングしてから、Tailwind クラス付きの通常の HTML をエクスポートします。

コンバーターはカスタム CSS 値を保持しますか？

Tailfind は値がフレームワークのスケールと一致する場合はデフォルトの Tailwind クラスを優先し、カスタムの色、間隔、影、サイズには明示的な任意値を使います。

カード、フォーム、セクション、プロトタイプ、関連する CSS をマークアップとともに貼り付けることができる従来のスニペットなど、小さく自己完結型の UI フラグメントが最適に機能します。

HTML と CSS を貼り付け、レンダリングされたフラグメントをプレビューし、Tailwind Play またはコードベース用のクリーンな Tailwind CSS をエクスポートします。

ソースプレビューなし

入力が有効なときにソースプレビューが表示されます。

Tailwind v4

まだ出力はありません

生成された Tailwind 出力がここに自動的に表示されます。

Tailwind プレビューはありません

生成された Tailwind プレビューは、変換後にここに表示されます。

ピクセルパーフェクトな Tailwind コンバーター

HTML と CSS を一緒に読み取る: セレクター、クラス、インラインスタイル、ネストされたルールは、Tailwind クラスが生成される前に実際のマークアップに対して解決されます。
意味のあるマークアップを保持する: セマンティック構造、属性、テキスト、リンク、フォーム要素はエクスポートされた HTML に残り、スタイルだけが Tailwind クラスへ移ります。
プレビューによる変換: ソースと生成されたプレビューにより、元のフラグメントと Tailwind 出力を簡単に比較できます。
ネストされた要素のカバレッジ: 子要素、SVG、アイコン、および構成された UI フラグメントは、周囲のスタイルコンテキストを使用して変換されます。
コンポーネントの再構築に役立ちます: コピーした UI フラグメント、プロトタイプ、静的スニペットを、元の HTML の形状を失うことなく Tailwind コンポーネントに移行します。
Tailwind Play へ渡す: 生成された Tailwind CSS は、Tailwind Play で直接開いて、編集、実験、共有をすばやく行うことができます。

HTML/CSS から Tailwind へのコンバーターは、貼り付けた UI フラグメント、ランディングページのセクション、プロトタイプ、セレクター、クラス、インライン宣言にスタイルが分かれているレガシーテンプレート向けに作られています。

Tailfind はマークアップをその CSS とともにレンダリングし、計算結果を読み取って Tailwind CSS をエクスポートするため、各宣言を手作業で変換せずに同じ構造を Tailwind プロジェクトへ移せます。

HTML から Tailwind CSS への高速変換、よりクリーンな Tailwind Play ハンドオフ、または Angular、React、Vue、Svelte、またはプレーン HTML で静的コンポーネントを再構築するための開始点が必要な場合に使用します。

Tailfind は HTML と CSS を Tailwind CSS に変換できますか?: はい。HTML フラグメントとその CSS を貼り付けると、Tailfind が結果をレンダリングしてから、Tailwind クラス付きの通常の HTML をエクスポートします。
コンバーターはカスタム CSS 値を保持しますか？: Tailfind は値がフレームワークのスケールと一致する場合はデフォルトの Tailwind クラスを優先し、カスタムの色、間隔、影、サイズには明示的な任意値を使います。
どのような HTML が最適ですか?: カード、フォーム、セクション、プロトタイプ、関連する CSS をマークアップとともに貼り付けることができる従来のスニペットなど、小さく自己完結型の UI フラグメントが最適に機能します。

手動変換をスキップする

Tailfind はブラウザーにコンバーターを提供するため、表示しているページから実稼働 UI を直接キャプチャできます。