Kan den konvertere CSS til Tailwind?

Ja. Lim inn en CSS-deklarasjonsblokk og Tailfind bruker den på et eksempelelement før du eksporterer den nærmeste Tailwind-klasselisten.

Er egendefinerte verdier bevart?

Tailfind tilordner verdier til standard Tailwind-klasser når det er mulig og holder ikke-standardverdier synlige som arbitrære klasser i stedet for å skjule dem.

Bør jeg lime inn et fullstendig stilark?

CSS-omformeren er designet for deklarasjonsblokker. Bruk HTML/CSS-omformeren når velgere, klasser, nestet oppmerking eller et fyldigere stilark er nødvendig.

CSS til Tailwind-konverterer

Lim inn en CSS-deklarasjonsblokk og konverter den gjengitte prøven til Tailwind-klasser du kan kopiere til komponenter.

CSS

Tailwind v4

Ingen utdata ennå

Generert Tailwind-utdata vises her automatisk.

Pikselperfekt Tailwind-konverterer

Konverter CSS til rene Tailwind-klasser

Deklarasjon først-konvertering: Lim inn en CSS-deklarasjonsblokk og Tailfind bruker den på et eksempelelement før du konverterer det gjengitte resultatet til gjenbrukbare Tailwind-klasser.
Standard verktøypreferanse: Bærbare Tailwind-standarder bevares når deklarasjonsverdier samsvarer med rammeskalaen.
Vilkårlig verdifallback: Ikke-standardverdier blir eksplisitte arbitrære klasser, så tilpassede piksler, farger, skygger og timing er enkle å inspisere.
Layoutsikker utgang: Avstand, størrelse, visning, rutenett, flex, kantlinjer, skygger og typografi er kartlagt fra den gjengitte prøven.
Rask klasseuttrekking: Utdataene er en fokusert Tailwind-klasseliste som er klar til å kopieres til en komponent, et token-eksperiment eller en oppryddingsrunde.
Bra for revisjoner: Bruk den til å erstatte engangs CSS-blokker, inline-stileksperimenter og designsystemprototyper med tydeligere Tailwind-klasser.

CSS omformer guide

Gjør CSS-deklarasjoner til Tailwind-klasser

CSS til Tailwind-omformeren gjør en deklarasjonsblokk til de nærmeste portable Tailwind-klassene. Det er nyttig for engangsdesigntokens, opprydding i inline-stil og flytting av små CSS-biter til komponent-markup.

Tailfind bruker erklæringene på et eksempelelement før konvertering, så verdier for layout, avstand, farge, kantlinje, skygge, typografi og størrelse tolkes gjennom den samme nettleserens gjengivelsesbane som brukes av utvidelsen.

Bruk den til å konvertere CSS-egenskaper til Tailwind-klasser, sjekke hvilke verdier som matcher standard Tailwind-skala, og beholde ikke-standardverdier som eksplisitte arbitrære klasser.

Kan den konvertere CSS til Tailwind?: Ja. Lim inn en CSS-deklarasjonsblokk og Tailfind bruker den på et eksempelelement før du eksporterer den nærmeste Tailwind-klasselisten.
Er egendefinerte verdier bevart?: Tailfind tilordner verdier til standard Tailwind-klasser når det er mulig og holder ikke-standardverdier synlige som arbitrære klasser i stedet for å skjule dem.
Bør jeg lime inn et fullstendig stilark?: CSS-omformeren er designet for deklarasjonsblokker. Bruk HTML/CSS-omformeren når velgere, klasser, nestet oppmerking eller et fyldigere stilark er nødvendig.

Hopp over manuell konvertering

Konverter enhver live-side til ren Tailwind CSS

Tailfind bringer konverteren til nettleseren din, slik at du kan fange produksjons-UI direkte fra siden du ser på.

Mer informasjon

Last ned