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 platný Bootstrap HTML.

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.

Pixel-perfektní 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řídy komponent
Karty, odznaky, upozornění, tlačítka, formuláře, nástroje pro mezery a textové nástroje jsou přeloženy do prostého označení připraveného pro Tailwind.
Vyčištění zálohované náhledem
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 mezery mezi nástroji 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 nástroji Tailwind, připravený k přesunu do šablon Angular, komponent React a dalších frontendových zásobníků.
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 označení 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 Bootstrapu, 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 k výrobě?
Výstupem je čitelný výchozí bod Tailwind pro práci na migraci a přestavbě. Před odesláním produkčního uživatelského rozhraní si jej prohlédněte ve svém vlastním konstrukčním systému.

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

Převeďte jakoukoli živou stránku na čistou 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.

Snímek obrazovky aplikace