Tailfind は Bootstrap 4 および Bootstrap 5 を Tailwind に変換できますか?

はい。 Bootstrap 4 または Bootstrap 5 を選択し、マークアップを貼り付けると、Tailfind は、Tailwind CSS をエクスポートする前に、一致する Bootstrap CSS をロードします。

Bootstrap ソースと Tailwind 結果を比較できますか?

はい。コンバーターにはソースプレビューと生成された Tailwind プレビューが表示されるため、出力をコピーする前に移行作業を確認できます。

出力は、移行および再構築作業の開始点となる読み取り可能な Tailwind です。実稼働 UI を出荷する前に、独自の設計システム内でレビューしてください。

はい。コンバーターにはソース プレビューと生成された Tailwind プレビューが表示されるため、出力をコピーする前に移行作業を確認できます。

Bootstrap 4 または 5 マークアップを貼り付け、プレビューを比較し、移行および再構築作業のために Tailwind CSS をエクスポートします。

Bootstrap

ソースプレビューなし

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

Tailwind v4

まだ出力はありません

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

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

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

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

バージョンを意識した変換: Bootstrap 4 または 5 を選択すると、Tailfind は Tailwind 出力を生成する前に正しいソースフレームワークの仮定を適用します。
コンポーネントクラスの変換: カード、バッジ、アラート、ボタン、フォーム、spacing class、text class は、Tailwind に適した通常の markup に変換されます。
プレビューに基づくクリーンアップ: ソースおよび生成されたプレビューは、コピーする前に Bootstrap 入力と Tailwind 出力を比較するのに役立ちます。
グリッドと間隔の移行: Bootstrap のレイアウトフラグメントと間隔指定は、読みやすく調整しやすい Tailwind クラスになります。
出力はSPA対応です: 結果は Tailwind クラス付きの通常の HTML になり、Angular テンプレート、React コンポーネント、その他の frontend stack に移しやすくなります。
Tailwind Play へ渡す: 生成された Tailwind CSS は、Tailwind Play で直接開いて、編集、実験、共有をすばやく行うことができます。

Bootstrap から Tailwind へのコンバーターは、すべてのコンポーネントクラスを手動で書き直すことなく、Bootstrap 4 および Bootstrap 5 マークアップを Tailwind プロジェクトに移動するのに役立ちます。

Tailfind は選択した Bootstrap バージョンを読み込み、ソースコンポーネントをプレビューして、カード、ボタン、バッジ、フォーム、グリッド、間隔、タイポグラフィ向けの Tailwind クラスを含む通常の HTML をエクスポートします。

Bootstrap の移行作業、Tailwind のリビルド、または独自の設計システム内で調整できる読みやすい開始点が必要な場合の迅速なコンポーネントの変換に使用します。

Tailfind は Bootstrap 4 および Bootstrap 5 を Tailwind に変換できますか?: はい。 Bootstrap 4 または Bootstrap 5 を選択し、マークアップを貼り付けると、Tailfind は、Tailwind CSS をエクスポートする前に、一致する Bootstrap CSS をロードします。
Bootstrap ソースと Tailwind 結果を比較できますか?: はい。コンバーターにはソースプレビューと生成された Tailwind プレビューが表示されるため、出力をコピーする前に移行作業を確認できます。
Bootstrap 出力は実稼働の準備ができていますか?: 出力は、移行および再構築作業の開始点となる読み取り可能な Tailwind です。実稼働 UI を出荷する前に、独自の設計システム内でレビューしてください。

手動変換をスキップする

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