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-konverteren er designet for deklarasjonsblokker. Bruk HTML/CSS-konverteren når velgere, klasser, nestet markup 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

Deklarasjonsbasert konvertering: Lim inn en CSS-deklarasjonsblokk og Tailfind bruker den på et eksempelelement før det gjengitte resultatet konverteres til gjenbrukbare Tailwind-klasser.
Foretrekker standardklasser: Portable Tailwind-standarder bevares når deklarasjonsverdier samsvarer med rammeverkets skala.
Fallback for arbitrære verdier: Ikke-standardverdier blir eksplisitte arbitrære klasser, så tilpassede piksler, farger, skygger og timing er enkle å inspisere.
Layoutsikre utdata: 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-konverteringsguide

Gjør CSS-deklarasjoner til Tailwind-klasser

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

Tailfind bruker deklarasjonene 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-konverteren er designet for deklarasjonsblokker. Bruk HTML/CSS-konverteren når velgere, klasser, nestet markup eller et fyldigere stilark er nødvendig.

Hopp over manuell konvertering

Konverter live-side
til 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