Převodník HTML/CSS na Tailwind

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.

Pixelově přesný 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 utility Tailwind vyřešeny podle skutečného markupu.
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á do utility.
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í markup spolu s CSS, přečte vypočítaný výsledek a exportuje Tailwind CSS, 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 ve frameworku Angular, React, 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 utility třídami Tailwind.
Udržuje převodník vlastní hodnoty CSS?
Tailfind preferuje výchozí utility Tailwind, když hodnoty odpovídají škále frameworku, a používá explicitní arbitrární utility 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
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