Omvandlare från HTML/CSS till Tailwind

Klistra in HTML och CSS, förhandsgranska det renderade fragmentet och exportera rena Tailwind CSS för Tailwind Play eller din kodbas.

Ingen källförhandsvisning

Källförhandsvisningen visas när inmatningen är giltig.

Tailwind v4

Ingen utdata ännu

Genererad Tailwind-utdata visas här automatiskt.

Ingen Tailwind förhandsvisning

Genererad Tailwind förhandsvisning visas här efter konvertering.

Pixel-perfekt Tailwind-omvandlare

Konvertera HTML och CSS till ren Tailwind CSS

Läser HTML och CSS tillsammans
Selektorer, klasser, inline-stilar och kapslade regler löses mot faktisk markup innan Tailwind-klasser genereras.
Behåller meningsfull uppmärkning
Semantisk struktur, attribut, text, länkar och formulärelement stannar i den exporterade HTML medan stilen flyttas till verktyg.
Förhandsgranskningsstödd konvertering
Källa och genererade förhandsvisningar gör det lättare att jämföra det ursprungliga fragmentet med Tailwind-utgången.
Kapslade elementtäckning
Underordnade element, SVG, ikoner och sammansatta UI-fragment konverteras med den omgivande stilkontexten.
Användbar för ombyggnad av komponenter
Migrera kopierade UI-fragment, prototyper och statiska utdrag till Tailwind-komponenter utan att förlora den ursprungliga HTML-formen.
Överlämning till Tailwind Play
Genererad Tailwind CSS kan öppnas direkt i Tailwind Play för snabba redigeringar, experiment och delning.

HTML/CSS omvandlarguide

Konvertera HTML och CSS till Tailwind

Omvandlaren HTML/CSS till Tailwind är byggd för inklistrade UI-fragment, målsidessektioner, prototyper och äldre mallar där stilar är uppdelade mellan väljare, klasser och inline-deklarationer.

Tailfind återger uppmärkningen med sin CSS, läser det beräknade resultatet och exporterar Tailwind-klar HTML så att du kan flytta samma struktur till Tailwind-projekt utan att manuellt översätta varje deklaration.

Använd den när du behöver snabb konvertering från HTML till Tailwind CSS, en renare Tailwind Play-överlämning eller en startpunkt för att bygga om statiska komponenter i Angular, React, Vue, Svelte eller vanlig HTML.

Kan Tailfind konvertera HTML och CSS till Tailwind CSS?
Ja. Klistra in ett HTML-fragment och dess CSS, så renderar Tailfind resultatet innan vanlig HTML med Tailwind-klasser exporteras.
Håller omvandlaren anpassade CSS-värden?
Tailfind föredrar standardklasser i Tailwind när värden matchar ramverkets skala och använder explicita arbiträra klasser för anpassade färger, avstånd, skuggor och storlekar.
Vilken typ av HTML fungerar bäst?
Små, fristående UI-fragment fungerar bäst, inklusive kort, formulär, sektioner, prototyper och äldre kodavsnitt där relevant CSS kan klistras in med märkningen.

Hoppa över manuell konvertering

Konvertera valfri live-sida till ren Tailwind CSS

Tailfind tar omvandlaren till din webbläsare, så att du kan fånga produktionsgränssnittet direkt från sidan du tittar på.

Mer information Ladda ner
Appens skärmdump