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

Deklarationsbaserad konvertering
Klistra in ett CSS-deklarationsblock och Tailfind tillämpar det på ett exempelelement innan det renderade resultatet konverteras till återanvändbara Tailwind-klasser.
Föredrar standardklasser
Portabla Tailwind-standardvärden bevaras när deklarationsvärdena matchar ramverkets skala.
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äkra utdata
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, ett token-experiment eller en rensningsrunda.
Bra för revisioner
Använd den för att ersätta enstaka CSS-block, inline-stilexperiment och designsystemprototyper med tydligare Tailwind-klasser.

CSS-konverterarguide

Förvandla CSS-deklarationer till Tailwind-klasser

CSS till Tailwind-konverteraren gör ett deklarationsblock till de närmaste portabla Tailwind-klasserna. Den är användbar för engångsdesigntokens, rensning av inline-stil och för att flytta små CSS-utdrag till komponentmarkup.

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 standardvärdena i Tailwind 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 live-sida
till 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