แปลง HTML/CSS เป็น Tailwind

วาง HTML และ CSS ดูตัวอย่างส่วนที่แสดงผล และส่งออก Tailwind CSS ที่สะอาดสำหรับ Tailwind Play หรือโค้ดเบสของคุณ

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

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

Tailwind v4

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

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

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

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

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

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

อ่าน HTML และ CSS พร้อมกัน
ตัวเลือก คลาส สไตล์อินไลน์ และกฎที่ซ้อนกันได้รับการแก้ไขโดยเทียบกับมาร์กอัปจริงก่อนที่จะสร้างยูทิลิตี Tailwind
เก็บมาร์กอัปที่มีความหมายไว้
โครงสร้าง semantic, attribute, ข้อความ, ลิงก์ และ form element จะยังอยู่ใน HTML ที่ส่งออก ส่วน styling จะย้ายไปอยู่ในคลาส Tailwind
การแปลงที่สนับสนุนการแสดงตัวอย่าง
แหล่งที่มาและการแสดงตัวอย่างที่สร้างขึ้นช่วยให้เปรียบเทียบแฟรกเมนต์ดั้งเดิมกับเอาต์พุต Tailwind ได้ง่ายขึ้น
ความครอบคลุมขององค์ประกอบที่ซ้อนกัน
องค์ประกอบลูก, SVG, ไอคอน และแฟรกเมนต์ UI ที่เรียบเรียงจะถูกแปลงพร้อมกับบริบทสไตล์โดยรอบ
มีประโยชน์สำหรับการสร้างส่วนประกอบใหม่
ย้ายชิ้นส่วน UI, ต้นแบบ และตัวอย่างแบบคงที่ที่คัดลอกไปยังส่วนประกอบ Tailwind โดยไม่สูญเสียรูปร่าง HTML ดั้งเดิม
ส่งต่อไปยัง Tailwind Play
Tailwind CSS ที่สร้างขึ้นสามารถเปิดได้โดยตรงในการเล่น Tailwind เพื่อการแก้ไข การทดลอง และการแชร์อย่างรวดเร็ว

คู่มือตัวแปลง HTML/CSS

แปลง HTML และ CSS เป็น Tailwind

ตัวแปลง HTML/CSS เป็น Tailwind ถูกสร้างขึ้นสำหรับการวางส่วน UI, ส่วนของหน้า Landing Page, ต้นแบบ และเทมเพลตดั้งเดิมที่แบ่งสไตล์ระหว่างตัวเลือก คลาส และการประกาศแบบอินไลน์

Tailfind เรนเดอร์มาร์กอัปด้วย CSS อ่านผลลัพธ์ที่คำนวณ และส่งออก HTML ที่พร้อมใช้งาน Tailwind เพื่อให้คุณสามารถย้ายโครงสร้างเดียวกันไปยังโปรเจ็กต์ Tailwind โดยไม่ต้องแปลทุกการประกาศด้วยตนเอง

ใช้เมื่อคุณต้องการการแปลง HTML เป็น Tailwind CSS อย่างรวดเร็ว แฮนด์ออฟ Play Tailwind ที่สะอาดกว่า หรือจุดเริ่มต้นสำหรับการสร้างส่วนประกอบคงที่ขึ้นใหม่ใน Angular, React, Vue, Svelte หรือ HTML ธรรมดา

Tailfind สามารถแปลง HTML และ CSS เป็น Tailwind CSS ได้หรือไม่
ใช่ วาง HTML fragment พร้อม CSS ของมัน แล้ว Tailfind จะ render ผลลัพธ์ก่อนส่งออก HTML ปกติพร้อมคลาส Tailwind
ตัวแปลงเก็บค่า CSS ที่กำหนดเองหรือไม่
Tailfind เลือกใช้คลาส Tailwind มาตรฐานเมื่อค่าตรงกับ scale ของ framework และใช้ arbitrary value ที่ชัดเจนสำหรับสี ระยะห่าง เงา และขนาดที่กำหนดเอง
HTML ประเภทใดทำงานได้ดีที่สุด?
ส่วน UI ขนาดเล็กในตัวเองทำงานได้ดีที่สุด รวมถึงการ์ด แบบฟอร์ม ส่วน ต้นแบบ และตัวอย่างข้อมูลแบบเดิมซึ่งสามารถวาง CSS ที่เกี่ยวข้องพร้อมกับมาร์กอัปได้

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

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

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

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