Dán đánh dấu Bootstrap 4 hoặc 5, so sánh bản xem trước và xuất Tailwind CSS cho công việc di chuyển và xây dựng lại.

Bootstrap

Không có bản xem trước nguồn

Bản xem trước nguồn xuất hiện khi HTML Bootstrap hợp lệ.

Tailwind v4

Chưa có đầu ra

Đầu ra Tailwind được tạo sẽ tự động xuất hiện ở đây.

Không có bản xem trước Tailwind

Bản xem trước Tailwind đã tạo sẽ xuất hiện ở đây sau khi chuyển đổi.

Bộ chuyển đổi Tailwind hoàn hảo đến từng pixel

Chuyển đổi các thành phần Bootstrap thành Tailwind CSS sạch

Chuyển đổi nhận biết phiên bản
Chọn Bootstrap 4 hoặc 5 để Tailfind áp dụng các giả định khung nguồn phù hợp trước khi tạo đầu ra Tailwind.
Dịch lớp thành phần
Card, badge, alert, nút, form, spacing utility và text utility được chuyển thành markup đơn giản sẵn sàng cho Tailwind.
Dọn dẹp được hỗ trợ trước
Bản xem trước nguồn và được tạo giúp so sánh đầu vào Bootstrap với đầu ra Tailwind trước khi bạn sao chép.
Di chuyển lưới và khoảng cách
Các đoạn bố cục Bootstrap và khoảng cách tiện ích trở thành các lớp Tailwind dễ đọc và dễ điều chỉnh hơn.
Đầu ra sẵn sàng cho SPA
Kết quả là HTML thông thường với các tiện ích Tailwind, sẵn sàng chuyển sang các mẫu Angular, các thành phần React và các ngăn xếp giao diện người dùng khác.
Handoff sang Tailwind Play
Tailwind CSS đã tạo có thể mở trực tiếp trong Tailwind Play để chỉnh sửa, thử nghiệm và chia sẻ nhanh chóng.

Hướng dẫn di chuyển Bootstrap

Di chuyển các thành phần Bootstrap vào các dự án Tailwind

Bộ chuyển đổi Bootstrap sang Tailwind giúp di chuyển đánh dấu Bootstrap 4 và Bootstrap 5 vào các dự án Tailwind mà không cần phải viết lại mọi lớp thành phần bằng tay.

Tailfind tải phiên bản Bootstrap đã chọn, xem trước thành phần nguồn và xuất HTML thông thường với các tiện ích Tailwind cho thẻ, nút, huy hiệu, biểu mẫu, lưới, khoảng cách và kiểu chữ.

Sử dụng nó cho công việc di chuyển Bootstrap, xây dựng lại Tailwind hoặc dịch thành phần nhanh chóng khi bạn muốn một điểm bắt đầu dễ đọc và có thể được tinh chỉnh trong hệ thống thiết kế của riêng bạn.

Tailfind có thể chuyển đổi Bootstrap 4 và Bootstrap 5 thành Tailwind không?
Đúng. Chọn Bootstrap 4 hoặc Bootstrap 5, dán đánh dấu và Tailfind tải Bootstrap CSS phù hợp trước khi xuất Tailwind CSS.
Tôi có thể so sánh nguồn Bootstrap với kết quả Tailwind không?
Đúng. Bộ chuyển đổi hiển thị bản xem trước nguồn và bản xem trước Tailwind được tạo để có thể kiểm tra công việc di chuyển trước khi sao chép đầu ra.
Đầu ra Bootstrap đã sẵn sàng để sản xuất chưa?
Đầu ra là điểm bắt đầu Tailwind có thể đọc được cho công việc di chuyển và xây dựng lại. Xem lại nó trong hệ thống thiết kế của riêng bạn trước khi vận chuyển giao diện người dùng sản xuất.

Bỏ qua chuyển đổi thủ công

Chuyển đổi bất kỳ trang trực tiếp nào thành Tailwind CSS sạch

Tailfind mang trình chuyển đổi đến trình duyệt của bạn, do đó bạn có thể nắm bắt giao diện người dùng sản xuất trực tiếp từ trang bạn đang xem.

Ảnh chụp màn hình ứng dụng