Vložte HTML a CSS, zobrazte náhled vykresleného fragmentu a exportujte čistý Tailwind CSS pro Tailwind Play nebo svou kódovou základnu.

Žádný náhled zdroje

Když je vstup platný, zobrazí se náhled zdroje.

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 HTML a CSS na čisté Tailwind CSS

Čte HTML a CSS společně
Selektory, třídy, vložené styly a vnořená pravidla jsou před vygenerováním obslužných programů Tailwind vyřešeny podle skutečného označení.
Udržuje smysluplné označení
Sémantická struktura, atributy, text, odkazy a prvky formuláře zůstávají v exportovaném HTML, zatímco styl se přesouvá na nástroje.
Konverze podporovaná náhledem
Zdrojové a generované náhledy usnadňují porovnání původního fragmentu s výstupem Tailwind.
Pokrytí vnořených prvků
Podřízené prvky, SVG, ikony a složené fragmenty uživatelského rozhraní jsou převedeny s okolním stylem.
Užitečné pro přestavby komponent
Migrujte zkopírované fragmenty uživatelského rozhraní, prototypy a statické úryvky do komponent Tailwind bez ztráty původního tvaru HTML.
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 převodníkem HTML/CSS

Převeďte HTML a CSS na Tailwind

Převodník HTML/CSS na Tailwind je vytvořen pro vložené fragmenty uživatelského rozhraní, sekce vstupní stránky, prototypy a starší šablony, kde jsou styly rozděleny mezi selektory, třídy a vložené deklarace.

Tailfind vykreslí označení pomocí svého CSS, přečte vypočítaný výsledek a exportuje HTML připravený na Tailwind, takže můžete přesunout stejnou strukturu do projektů Tailwind bez ručního překladu každé deklarace.

Použijte ho, když potřebujete rychle převést HTML na Tailwind CSS, čistěji předat výsledek do Tailwind Play nebo získat základ pro rebuild statických komponent v Angularu, Reactu, Vue, Svelte nebo čistém HTML.

Může Tailfind převést HTML a CSS na Tailwind CSS?
Ano. Vložte fragment HTML a jeho CSS a Tailfind vykreslí výsledek před exportem běžného HTML s pomocnými třídami Tailwind.
Udržuje převodník vlastní hodnoty CSS?
Tailfind preferuje výchozí nástroje Tailwind, když hodnoty odpovídají měřítku rámce, a používá explicitní libovolné nástroje pro vlastní barvy, mezery, stíny a velikosti.
Jaký typ HTML funguje nejlépe?
Nejlépe fungují malé samostatné fragmenty uživatelského rozhraní, včetně karet, formulářů, sekcí, prototypů a starších úryvků, kam lze s označením vložit relevantní CSS.

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