CSS til Tailwind-konverter

Indsæt en CSS-deklarationsblok, og konverter den renderede prøve til Tailwind-klasser, du kan kopiere til komponenter.

CSS
Tailwind v4

Ingen output endnu

Genereret Tailwind output vises her automatisk.

Pixel-perfekt Tailwind-konverter

Konverter CSS til rene Tailwind klasser

Erklæring-første konvertering
Indsæt en CSS-deklarationsblok, og Tailfind anvender den på et eksempelelement, før det renderede resultat konverteres til genanvendelige Tailwind-klasser.
Standard hjælpeprogram præference
Portable Tailwind-standarder bevares, når deklarationsværdier matcher frameworkets skala.
Fallback for vilkårlige værdier
Ikke-standardværdier bliver eksplicitte arbitrære klasser, så brugerdefinerede pixels, farver, skygger og timing er nemme at inspicere.
Layoutsikkert output
Afstand, størrelse, visning, gitter, flex, grænser, skygger og typografi kortlægges fra den gengivede prøve.
Hurtigt klasseudtræk
Outputtet er en fokuseret Tailwind-klasseliste, der er klar til at kopiere til en komponent, et token-eksperiment eller en oprydningsrunde.
God til revision
Brug den til at erstatte enkeltstående CSS-blokke, inline-stileksperimenter og designsystemprototyper med tydeligere Tailwind-klasser.

CSS konverter guide

Gør CSS-deklarationer til Tailwind-klasser

CSS til Tailwind-konverteren forvandler en deklarationsblok til de nærmeste portable Tailwind-klasser. Det er nyttigt til engangs-design tokens, oprydning i inline styles og flytning af små CSS-uddrag til komponent-markup.

Tailfind anvender erklæringerne på et eksempelelement før konvertering, så værdierne for layout, mellemrum, farve, kant, skygge, typografi og størrelse fortolkes gennem den samme browsergengivelsessti, som bruges af udvidelsen.

Brug den til at konvertere CSS-egenskaber til Tailwind-klasser, tjekke hvilke værdier der matcher Tailwinds standardskala, og holde ikke-standardværdier som eksplicitte arbitrære klasser.

Kan det konvertere CSS til Tailwind?
Ja. Indsæt en CSS-deklarationsblok, og Tailfind anvender den på et eksempelelement, før den nærmeste Tailwind-klasseliste eksporteres.
Er brugerdefinerede værdier bevaret?
Tailfind kortlægger værdier til standardklasser i Tailwind, når det er muligt, og holder ikke-standardværdier synlige som arbitrære klasser i stedet for at skjule dem.
Skal jeg indsætte et komplet stylesheet?
CSS-konverteren er designet til deklarationsblokke. Brug HTML/CSS-konverteren, når der er behov for vælgere, klasser, indlejret markup eller et mere fyldigt stylesheet.

Spring over manuel konvertering

Konverter enhver live-side til ren Tailwind CSS

Tailfind bringer konverteren til din browser, så du kan fange produktions-UI direkte fra den side, du ser.

Mere info Download
App-skærmbillede