Převodník Bootstrap na Tailwind

Vložte označení Bootstrap 4 nebo 5, porovnejte náhled a exportujte Tailwind CSS pro práci na migraci a přestavbě.

Bootstrap

Žádný náhled zdroje

Náhled zdroje se zobrazí, když je Bootstrap HTML platné.

Tailwind v4

Zatím žádný výstup

Vygenerovaný výstup Tailwind se zde objeví automaticky.

Žádný náhled Tailwind

Po konverzi se zde zobrazí vygenerovaný náhled Tailwind.

Pixelově přesný převodník Tailwind

Převeďte komponenty Bootstrap na čisté Tailwind CSS

Konverze s ohledem na verzi
Zvolte Bootstrap 4 nebo 5, aby Tailfind aplikoval správné předpoklady zdrojového rámce před generováním výstupu Tailwind.
Překlad tříd komponent
Karty, odznaky, upozornění, tlačítka, formuláře, utility pro mezery a textové utility jsou přeloženy do prostého Tailwind CSS.
Čištění s podporou náhledu
Zdrojové a generované náhledy pomáhají porovnat vstup Bootstrap s výstupem Tailwind před kopírováním.
Migrace mřížky a mezer
Fragmenty rozvržení Bootstrap a spacing utility se stávají čitelnými třídami Tailwind, které se snadněji ladí.
Výstup je připraven na SPA
Výsledkem je běžné HTML s utility Tailwind, připravené k přesunu do šablon Angular, komponent React a dalších frontendových stacků.
Předání do Tailwind Play
Vygenerovaný Tailwind CSS lze otevřít přímo v Tailwind Play pro rychlé úpravy, experimenty a sdílení.

Průvodce migrací Bootstrap

Přesuňte komponenty Bootstrap do projektů Tailwind

Převodník Bootstrap na Tailwind pomáhá přesunout markup Bootstrap 4 a Bootstrap 5 do projektů Tailwind bez ručního přepisování každé třídy komponent.

Tailfind načte vybranou verzi Bootstrap, zobrazí náhled zdrojové komponenty a exportuje běžné HTML s třídami Tailwind pro karty, tlačítka, odznaky, formuláře, mřížky, mezery a typografii.

Použijte jej pro migraci Bootstrap, přestavby Tailwind nebo rychlý překlad komponent, pokud chcete čitelný výchozí bod, který lze vylepšit ve vašem vlastním návrhovém systému.

Může Tailfind převést Bootstrap 4 a Bootstrap 5 na Tailwind?
Ano. Zvolte Bootstrap 4 nebo Bootstrap 5, vložte označení a Tailfind načte odpovídající Bootstrap CSS před exportem Tailwind CSS.
Mohu porovnat zdroj Bootstrap s výsledkem Tailwind?
Ano. Převaděč zobrazuje náhled zdroje a vygenerovaný náhled Tailwind, takže práci na migraci lze zkontrolovat před zkopírováním výstupu.
Je výstup Bootstrap připravený do produkce?
Výstupem je čitelný výchozí bod Tailwind pro práci na migraci a přestavbě. Před nasazením produkčního UI si jej prohlédněte ve svém vlastním design systému.

Přeskočit ruční převod

Převeďte jakoukoli živou stránku
do čistého Tailwind CSS

Tailfind přináší převodník do vašeho prohlížeče, takže můžete zachytit produkční uživatelské rozhraní přímo ze stránky, kterou si prohlížíte.

Více informací Stáhnout
Snímek obrazovky aplikace