CSS Tailwindiksi -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.

Pikselin täydellinen Tailwind-muunnin

Muunna CSS puhtaiksi Tailwind-luokiksi

Ilmoitus-ensimmäinen muunnos
Liitä CSS-deklaraatiolohko ja Tailfind käyttää sitä näyteelementissä ennen kuin muuntaa renderöidyn tuloksen uudelleenkäytettäviksi Tailwind-luokiksi.
Oletusapuohjelman asetus
Tailwindin portable oletusarvot säilyvät, kun deklaraatioiden arvot vastaavat frameworkin skaalaa.
Mielivaltainen arvon palautus
Ei-oletusarvot muuttuvat eksplisiittisiksi arbitraarisiksi luokiksi, jolloin mukautettuja pikseleitä, värejä, varjoja ja ajoituksia on helppo tarkistaa.
Asetteluturvallinen tuloste
Välit, koko, näyttö, ruudukko, jousto, reunat, varjot ja typografia kartoitetaan renderoidusta näytteestä.
Nopea luokan 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-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, Tailwindin oletusasteikkoon sopivien arvojen tarkistamiseen ja mukautettujen arvojen pitämiseen selkeinä arbitraarisina luokkina.

Voiko se muuntaa CSS:n Tailwind:ksi?
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 mikä tahansa live-sivu puhtaaksi Tailwind CSS:ksi

Tailfind tuo muuntimen selaimeesi, jotta voit siepata tuotantokäyttöliittymän suoraan katselemalta sivulta.

Lisätietoja Lataa
Sovelluksen kuvakaappaus