CSS till Tailwind-konverterare

Klistra in ett CSS-deklarationsblock och konvertera det renderade provet till Tailwind-klasser som du kan kopiera till komponenter.

CSS
Tailwind v4

Ingen utdata ännu

Genererad Tailwind-utdata visas här automatiskt.

Pixel-perfekt Tailwind-omvandlare

Konvertera CSS till rena Tailwind-klasser

Deklaration-första konvertering
Klistra in ett CSS-deklarationsblock och Tailfind tillämpar det på ett exempelelement innan det renderade resultatet konverteras till återanvändbara Tailwind-klasser.
Standardinställning för verktyg
Bärbara Tailwind-standardvärden bevaras när deklarationsvärdena matchar ramverksskalan.
Fallback för godtyckliga värden
Icke-standardvärden blir explicita arbiträra klasser, så anpassade pixlar, färger, skuggor och timing är lätta att inspektera.
Layoutsäker utgång
Avstånd, storlek, visning, rutnät, flex, gränser, skuggor och typografi mappas från det renderade provet.
Snabb klassextraktion
Utdata är en fokuserad Tailwind-klasslista som är redo att kopieras till en komponent, token-spike eller rensningspass.
Bra för revisioner
Använd den för att ersätta enstaka CSS-block, inline-stilexperiment och designsystemprototyper med tydligare Tailwind-klasser.

CSS omvandlarguide

Förvandla CSS-deklarationer till Tailwind-klasser

CSS till Tailwind-omvandlaren förvandlar ett deklarationsblock till de närmaste portabla Tailwind-klasserna. Det är användbart för engångsdesign tokens, rensning av inline-stil och för att flytta små CSS-utdrag till komponent-markup.

Tailfind tillämpar deklarationerna på ett exempelelement före konvertering, så värdena för layout, avstånd, färg, ram, skugga, typografi och storlek tolkas genom samma webbläsarrenderingsväg som används av tillägget.

Använd den för att konvertera CSS-egenskaper till Tailwind-klasser, kontrollera vilka värden som matchar Tailwinds standardskala och behålla icke-standardvärden som explicita arbiträra klasser.

Kan det konvertera CSS till Tailwind?
Ja. Klistra in ett CSS-deklarationsblock och Tailfind tillämpar det på ett exempelelement innan den närmaste Tailwind-klasslistan exporteras.
Bevaras anpassade värden?
Tailfind mappar värden till standardklasser i Tailwind när det är möjligt och håller icke-standardvärden synliga som arbiträra klasser i stället för att dölja dem.
Ska jag klistra in en fullständig stilmall?
CSS-omvandlaren är designad för deklarationsblock. Använd HTML/CSS-omvandlaren när väljare, klasser, kapslad uppmärkning eller en mer fullständig stilmall behövs.

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