CSS を Tailwind に変換できますか？

はい。 CSS 宣言ブロックを貼り付けると、Tailfind はそれをサンプル要素に適用してから、最も近い Tailwind クラスリストをエクスポートします。

カスタム値は保持されますか?

Tailfind は可能な場合は値をデフォルトの Tailwind クラスに対応させ、デフォルト以外の値は隠さず任意値として見える形で残します。

CSS コンバーターは、宣言ブロック用に設計されています。セレクター、クラス、ネストされたマークアップ、またはより完全なスタイルシートが必要な場合は、HTML/CSS コンバーターを使用します。

CSS 宣言ブロックを貼り付け、レンダリングされたサンプルをコンポーネントにコピーできる Tailwind クラスに変換します。

CSS

Tailwind v4

まだ出力はありません

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

宣言優先変換: CSS 宣言ブロックを貼り付けると、レンダリングされた結果を再利用可能な Tailwind クラスに変換する前に、Tailfind がそれをサンプル要素に適用します。
デフォルトクラスを優先: 移植可能な Tailwind のデフォルトは、宣言値がフレームワークのスケールと一致する場合に保持されます。
任意の値のフォールバック: デフォルト以外の値は明示的な任意値になるため、カスタムのピクセル、色、影、タイミングを確認しやすくなります。
レイアウトを保ちやすい出力: 間隔、サイズ、表示、グリッド、フレックス、境界線、影、タイポグラフィーは、レンダリングされたサンプルからマッピングされます。
高速クラス抽出: 出力は、コンポーネント、トークン検証、または整理作業にコピーできる、焦点を絞った Tailwind クラスリストです。
監査に適しています: 一回限りの CSS ブロック、インラインスタイルの実験、デザインシステムのプロトタイプを、より明確な Tailwind クラスに置き換えるときに使えます。

CSS から Tailwind へのコンバーターは、宣言ブロックを最も近い再利用しやすい Tailwind クラスに変換します。一回限りのデザイントークン、インラインスタイルの整理、小さな CSS スニペットをコンポーネントのマークアップへ移すときに役立ちます。

Tailfind は変換前に宣言をサンプル要素に適用するため、レイアウト、間隔、色、境界線、影、タイポグラフィ、およびサイズ設定の値は、拡張機能で使用されるのと同じブラウザーのレンダリングパスを通じて解釈されます。

CSS プロパティを Tailwind クラスに変換し、どの値がデフォルトの Tailwind スケールに対応するかを確認し、デフォルト以外の値は明示的な任意値として残せます。

CSS を Tailwind に変換できますか？: はい。 CSS 宣言ブロックを貼り付けると、Tailfind はそれをサンプル要素に適用してから、最も近い Tailwind クラスリストをエクスポートします。
カスタム値は保持されますか?: Tailfind は可能な場合は値をデフォルトの Tailwind クラスに対応させ、デフォルト以外の値は隠さず任意値として見える形で残します。
完全なスタイルシートを貼り付ける必要がありますか?: CSS コンバーターは、宣言ブロック用に設計されています。セレクター、クラス、ネストされたマークアップ、またはより完全なスタイルシートが必要な場合は、HTML/CSS コンバーターを使用します。

手動変換をスキップする

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