Bootstrap Tailwindiksi Muunnin

Liitä Bootstrap 4 tai 5 merkintä, vertaa esikatselua ja vie Tailwind CSS siirtoa ja uudelleenrakennustyötä varten.

Bootstrap

Ei lähde-esikatselua

Lähde-esikatselu näkyy, kun Bootstrap-HTML on kelvollinen.

Tailwind v4

Ei tulosta vielä

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

Ei Tailwind-esikatselua

Luotu Tailwind-esikatselu näkyy tässä muuntamisen jälkeen.

Pikselin täydellinen Tailwind-muunnin

Muunna Bootstrap-komponentit puhtaiksi Tailwind CSS -komponenteiksi

Versiotietoinen muunnos
Valitse Bootstrap 4 tai 5, jotta Tailfind käyttää oikeita lähdekehyksen oletuksia ennen Tailwind-ulostulon luomista.
Komponenttiluokan käännös
Kortit, badget, alertit, painikkeet, lomakkeet, spacing-luokat ja tekstiluokat muunnetaan tavalliseksi markupiksi Tailwindia varten.
Esikatselun tukema puhdistus
Lähde ja luodut esikatselut auttavat vertailemaan Bootstrap-tuloa Tailwind-lähtöön ennen kopioimista.
Ruudukko- ja välimittaus
Bootstrap-asettelufragmentit ja hyödyllisyysvälit tulevat luettaviksi Tailwind-luokiksi, joita on helpompi virittää.
Lähtö on SPA-valmis
Tuloksena on tavallinen HTML Tailwind-luokilla, valmiina Angular-malleihin, React-komponentteihin ja muihin frontend-pinoihin.
Siirto Tailwind Playhin
Luotu Tailwind CSS voidaan avata suoraan Tailwind Playssa nopeaa muokkausta, kokeilua ja jakamista varten.

Bootstrap-siirtoopas

Siirrä Bootstrap-komponentit Tailwind-projekteihin

Bootstrap–Tailwind-muunnin auttaa siirtämään Bootstrap 4- ja Bootstrap 5 -merkinnät Tailwind-projekteihin kirjoittamatta jokaista komponenttiluokkaa käsin uudelleen.

Tailfind lataa valitun Bootstrap-version, esikatselee lähdekomponentin ja vie tavallisen HTML:n Tailwind-luokilla korteille, painikkeille, badgeille, lomakkeille, ruudukoille, spacingille ja typografialle.

Käytä sitä Bootstrap-siirtotyöhön, Tailwind-uudelleenrakennuksiin tai komponenttien nopeaan kääntämiseen, kun haluat luettavan aloituskohdan, jota voidaan jalostaa omassa suunnittelujärjestelmässäsi.

Voiko Tailfind muuntaa Bootstrap 4:n ja Bootstrap 5:n Tailwind:ksi?
Kyllä. Valitse Bootstrap 4 tai Bootstrap 5, liitä merkintä, ja Tailfind lataa vastaavan Bootstrap CSS ennen Tailwind CSS:n vientiä.
Voinko verrata Bootstrap-lähdettä Tailwind-tulokseen?
Kyllä. Muunnin näyttää lähteen esikatselun ja luodun Tailwind-esikatselun, joten siirtotyö voidaan tarkistaa ennen tulosteen kopioimista.
Onko Bootstrap-lähtö valmis tuotantoon?
Tulos on luettava Tailwind-aloituspiste siirto- ja uudelleenrakennustyölle. Tarkista se omassa suunnittelujärjestelmässäsi ennen tuotantokäyttöliittymän lähettämistä.

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