Voiko se muuntaa CSS-deklaraatiot Tailwind-luokiksi?

Kyllä. Liitä CSS-deklaraatiolohko ja Tailfind käyttää sitä näyteelementissä ennen lähimmän Tailwind-luokkaluettelon vientiä.

Säilytetäänkö mukautettuja arvoja?

Tailfind kartoittaa arvot oletusarvoisiin Tailwind-luokkiin, kun mahdollista, ja pitää muut kuin oletusarvot näkyvissä arbitraarisina luokkina piilottamisen sijaan.

Pitäisikö minun liittää täydellinen tyylitaulukko?

CSS-muunnin on suunniteltu deklaraatiolohkoille. Käytä HTML/CSS-muunninta, kun tarvitaan valitsimia, luokkia, sisäkkäisiä markup-rakenteita tai täydellisempää tyylitaulukkoa.

CSS Tailwind-muotoon -muunnin

Liitä CSS-deklaraatiolohko ja muunna renderöity esimerkki Tailwind-luokiksi, jotka voit kopioida komponentteihin.

CSS

Tailwind v4

Ei tulosta vielä

Luotu Tailwind-tulos näkyy tässä automaattisesti.

Pikselintarkka Tailwind-muunnin

Muunna CSS puhtaiksi Tailwind-luokiksi

Deklaraatiolähtöinen muunnos: Liitä CSS-deklaraatiolohko ja Tailfind käyttää sitä näyteelementissä ennen kuin muuntaa renderöidyn tuloksen uudelleenkäytettäviksi Tailwind-luokiksi.
Suosii oletusluokkia: Siirrettävät Tailwind-oletusarvot säilyvät, kun deklaraatioiden arvot vastaavat frameworkin skaalaa.
Fallback mukautetuille arvoille: Ei-oletusarvot muuttuvat eksplisiittisiksi arbitraarisiksi luokiksi, jolloin mukautettuja pikseleitä, värejä, varjoja ja ajoituksia on helppo tarkistaa.
Asettelun kannalta turvallinen tulos: Välit, koko, näyttö, ruudukko, jousto, reunat, varjot ja typografia kartoitetaan renderoidusta näytteestä.
Nopea luokkien poiminta: Tulos on kohdistettu Tailwind-luokkaluettelo, joka on valmis kopioitavaksi komponenttiin, token-kokeiluun tai siivouskierrokseen.
Hyvä auditointiin: Käytä sitä korvaamaan kertaluonteisia CSS-lohkoja, inline-tyylikokeita ja design system -prototyyppejä selkeämmillä Tailwind-luokilla.

CSS-muuntimen opas

Muunna CSS-deklaraatiot Tailwind-luokiksi

CSS Tailwind-muotoon -muunnin muuntaa deklaraatiolohkon lähimpiin siirrettäviin Tailwind-luokkiin. Se sopii yksittäisiin design tokeneihin, inline-tyylien siivoukseen ja pienten CSS-katkelmien siirtämiseen komponenttimarkupiin.

Tailfind soveltaa deklaraatiot esimerkkielementtiin ennen muunnosta, joten layout-, spacing-, väri-, border-, shadow-, typografia- ja kokovalinnat tulkitaan samalla selaimen renderöintipolulla kuin laajennuksessa.

Käytä sitä CSS-ominaisuuksien muuntamiseen Tailwind-luokiksi, Tailwind-oletusasteikkoon sopivien arvojen tarkistamiseen ja mukautettujen arvojen pitämiseen selkeinä arbitraarisina luokkina.

Voiko se muuntaa CSS-deklaraatiot Tailwind-luokiksi?: Kyllä. Liitä CSS-deklaraatiolohko ja Tailfind käyttää sitä näyteelementissä ennen lähimmän Tailwind-luokkaluettelon vientiä.
Säilytetäänkö mukautettuja arvoja?: Tailfind kartoittaa arvot oletusarvoisiin Tailwind-luokkiin, kun mahdollista, ja pitää muut kuin oletusarvot näkyvissä arbitraarisina luokkina piilottamisen sijaan.
Pitäisikö minun liittää täydellinen tyylitaulukko?: CSS-muunnin on suunniteltu deklaraatiolohkoille. Käytä HTML/CSS-muunninta, kun tarvitaan valitsimia, luokkia, sisäkkäisiä markup-rakenteita tai täydellisempää tyylitaulukkoa.

Ohita manuaalinen muunnos

Muunna live-sivu
Tailwind CSS -muotoon

Tailfind tuo muuntimen selaimeesi, jotta voit kaapata tuotantokäyttöliittymän suoraan sivulta, jota katsot.

Lisätietoja

Lataa