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

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

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

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

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

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

CSS

Tailwind v4

まだ出力はありません

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

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

CSS から Tailwind へのコンバーターは、宣言ブロックを最も近い再利用しやすい Tailwind クラスに変換します。単発の design token、inline style の整理、小さな CSS snippet を component markup に移すときに役立ちます。

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

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

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

手動変換をスキップする

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