แปลง Bootstrap เป็น Tailwind

วางมาร์กอัป Bootstrap 4 หรือ 5 เปรียบเทียบการแสดงตัวอย่าง และส่งออก Tailwind CSS สำหรับการย้ายข้อมูลและสร้างงานใหม่

Bootstrap

ไม่มีตัวอย่างแหล่งที่มา

ตัวอย่างแหล่งที่มาจะปรากฏเมื่อ Bootstrap HTML ถูกต้อง

Tailwind v4

ยังไม่มีเอาท์พุต

เอาต์พุต Tailwind ที่สร้างขึ้นจะปรากฏขึ้นที่นี่โดยอัตโนมัติ

ไม่มีการแสดงตัวอย่าง Tailwind

การแสดงตัวอย่าง Tailwind ที่สร้างขึ้นจะปรากฏที่นี่หลังจากการแปลง

ตัวแปลง Tailwind ที่สมบูรณ์แบบทุกพิกเซล

แปลงส่วนประกอบ Bootstrap ให้เป็น Tailwind CSS ที่สะอาด

การแปลงที่รับรู้เวอร์ชัน
เลือก Bootstrap 4 หรือ 5 เพื่อให้ Tailfind ใช้สมมติฐานเฟรมเวิร์กแหล่งที่มาที่ถูกต้องก่อนสร้างเอาต์พุต Tailwind
การแปลคลาสส่วนประกอบ
การ์ด ป้าย alert ปุ่ม ฟอร์ม คลาส spacing และคลาส text จะถูกแปลงเป็น markup ปกติที่พร้อมใช้กับ Tailwind
การล้างข้อมูลที่สำรองไว้อย่างแสดงตัวอย่าง
แหล่งที่มาและการแสดงตัวอย่างที่สร้างขึ้นจะช่วยเปรียบเทียบอินพุต Bootstrap กับเอาต์พุต Tailwind ก่อนที่คุณจะคัดลอก
การโยกย้ายกริดและระยะห่าง
layout fragment และ spacing ของ Bootstrap จะกลายเป็นคลาส Tailwind ที่อ่านง่ายและปรับแต่งได้สะดวกกว่า
เอาต์พุตพร้อมสำหรับ SPA
ผลลัพธ์คือ HTML ปกติพร้อมคลาส Tailwind พร้อมนำไปใช้ในเทมเพลต Angular, component React และ frontend stack อื่นๆ
ส่งต่อไปยัง Tailwind Play
Tailwind CSS ที่สร้างขึ้นสามารถเปิดได้โดยตรงในการเล่น Tailwind เพื่อการแก้ไข การทดลอง และการแชร์อย่างรวดเร็ว

คู่มือการโยกย้าย Bootstrap

ย้ายส่วนประกอบ Bootstrap ไปยังโปรเจ็กต์ Tailwind

ตัวแปลง Bootstrap เป็น Tailwind ช่วยย้ายมาร์กอัป Bootstrap 4 และ Bootstrap 5 ไปยังโปรเจ็กต์ Tailwind โดยไม่ต้องเขียนคลาสส่วนประกอบทั้งหมดใหม่ด้วยมือ

Tailfind โหลดเวอร์ชัน Bootstrap ที่เลือก ดูตัวอย่าง component ต้นทาง และส่งออก HTML ปกติพร้อมคลาส Tailwind สำหรับการ์ด ปุ่ม ป้าย ฟอร์ม กริด spacing และ typography

ใช้สำหรับงานย้าย Bootstrap, สร้าง Tailwind ใหม่ หรือแปลส่วนประกอบอย่างรวดเร็ว เมื่อคุณต้องการจุดเริ่มต้นที่อ่านได้ ซึ่งสามารถปรับแต่งภายในระบบการออกแบบของคุณเองได้

Tailfind สามารถแปลง Bootstrap 4 และ Bootstrap 5 เป็น Tailwind ได้หรือไม่
ใช่. เลือก Bootstrap 4 หรือ Bootstrap 5 วางมาร์กอัป จากนั้น Tailfind จะโหลด Bootstrap CSS ที่ตรงกันก่อนที่จะส่งออก Tailwind CSS
ฉันสามารถเปรียบเทียบแหล่งที่มา Bootstrap กับผลลัพธ์ Tailwind ได้หรือไม่
ใช่. ตัวแปลงจะแสดงตัวอย่างแหล่งที่มาและตัวอย่าง Tailwind ที่สร้างขึ้น เพื่อให้สามารถตรวจสอบงานการย้ายก่อนที่จะคัดลอกเอาต์พุต
เอาต์พุต Bootstrap พร้อมสำหรับการผลิตหรือไม่
เอาต์พุตเป็นจุดเริ่มต้น Tailwind ที่อ่านได้สำหรับการย้ายและสร้างงานใหม่ ตรวจสอบภายในระบบการออกแบบของคุณเองก่อนจัดส่ง UI การผลิต

ข้ามการแปลงด้วยตนเอง

แปลงเพจสดใด ๆ ให้เป็น Tailwind CSS ที่สะอาดตา

Tailfind นำตัวแปลงมาสู่เบราว์เซอร์ของคุณ เพื่อให้คุณสามารถจับภาพ UI ที่ใช้งานจริงได้โดยตรงจากหน้าที่คุณกำลังดู

ข้อมูลเพิ่มเติม ดาวน์โหลด
ภาพหน้าจอของแอป