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.

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

Intet resultat endnu

Genereret Tailwind-resultat vises her automatisk.

Pixel-perfekt Tailwind-konverter

Konverter CSS til rene Tailwind klasser

Deklarationsbaseret konvertering: Indsæt en CSS-deklarationsblok, og Tailfind anvender den på et eksempelelement, før det renderede resultat konverteres til genanvendelige Tailwind-klasser.
Foretrækker standardklasser: 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, kanter, skygger og typografi kortlægges fra den gengivne prøve.
Hurtigt klasseudtræk: Resultatet 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-konverterguide

Gør CSS-deklarationer til Tailwind-klasser

CSS til Tailwind-konverteren forvandler en deklarationsblok til de nærmeste portable Tailwind-klasser. Den er nyttig til engangs-designtokens, oprydning i inline styles og flytning af små CSS-uddrag til komponentmarkup.

Tailfind anvender deklarationerne på et eksempelelement før konvertering, så værdierne for layout, afstand, 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 standardværdierne i Tailwind, 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 live-side
til Tailwind CSS

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

Mere information

Download