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

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

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

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

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

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

ソースプレビューなし

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

Tailwind v4

まだ出力はありません

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

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

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

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

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

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

Tailfind は、CSS でマークアップをレンダリングし、計算結果を読み取り、Tailwind 対応の HTML をエクスポートします。これにより、すべての宣言を手動で翻訳することなく、同じ構造を Tailwind プロジェクトに移動できます。

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

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

手動変換をスキップする

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