แปลง CSS เป็น Tailwind

วางบล็อกการประกาศ CSS และแปลงตัวอย่างที่แสดงผลเป็นคลาส Tailwind ที่คุณสามารถคัดลอกไปยังส่วนประกอบได้

CSS
Tailwind v4

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

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

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

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

แปลงจาก declaration ก่อน
วางบล็อก declaration ของ CSS แล้ว Tailfind จะนำไปใช้กับองค์ประกอบตัวอย่างก่อนแปลงผลลัพธ์ที่เรนเดอร์เป็นคลาส Tailwind ที่นำกลับมาใช้ซ้ำได้
ให้ความสำคัญกับคลาสมาตรฐาน
ค่า Tailwind default ที่พกพาได้จะถูกรักษาไว้เมื่อค่า declaration ตรงกับ scale ของ framework
fallback สำหรับ arbitrary value
ค่าที่ไม่ใช่ค่า default จะกลายเป็น arbitrary value ที่ชัดเจน จึงตรวจสอบ pixel สี เงา และ timing แบบกำหนดเองได้ง่าย
เอาต์พุตที่ปลอดภัยสำหรับเค้าโครง
การเว้นวรรค การกำหนดขนาด การแสดงผล ตาราง ดิ้น เส้นขอบ เงา และตัวพิมพ์จะถูกแมปจากตัวอย่างที่แสดงผล
ดึงคลาสอย่างรวดเร็ว
เอาต์พุตคือรายการคลาส Tailwind ที่โฟกัสและพร้อมคัดลอกไปยัง component, token spike หรือรอบ cleanup
ดีสำหรับการตรวจสอบ
ใช้แทนบล็อก CSS เฉพาะงาน การทดลอง inline style และต้นแบบ design system ด้วยคลาส Tailwind ที่อ่านง่ายกว่า

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

เปลี่ยนการประกาศ CSS ให้เป็นคลาส Tailwind

ตัวแปลง CSS เป็น Tailwind จะเปลี่ยนบล็อก declaration ให้เป็นคลาส Tailwind ที่ใกล้เคียงและนำไปใช้ต่อได้ เหมาะสำหรับ design token เฉพาะงาน การจัดระเบียบ inline style และการย้าย CSS snippet ขนาดเล็กเข้า markup ของ component

Tailfind ใช้การประกาศกับองค์ประกอบตัวอย่างก่อนการแปลง ดังนั้นค่าเค้าโครง ระยะห่าง สี เส้นขอบ เงา การพิมพ์ และขนาดจะถูกตีความผ่านพาธการเรนเดอร์เบราว์เซอร์เดียวกันกับที่ใช้โดยส่วนขยาย

ใช้เพื่อแปลงคุณสมบัติ CSS เป็นคลาส Tailwind ตรวจสอบว่าค่าใดตรงกับ scale เริ่มต้นของ Tailwind และเก็บค่าที่ไม่ใช่ค่าเริ่มต้นไว้เป็น arbitrary value ที่ชัดเจน

มันสามารถแปลง CSS เป็น Tailwind ได้หรือไม่?
ใช่. วางบล็อกการประกาศ CSS และ Tailfind นำไปใช้กับองค์ประกอบตัวอย่างก่อนที่จะส่งออกรายการคลาส Tailwind ที่ใกล้เคียงที่สุด
ค่าที่กำหนดเองจะยังคงอยู่หรือไม่
Tailfind จับคู่ค่ากับคลาส Tailwind เริ่มต้นเมื่อทำได้ และเก็บค่าที่ไม่ใช่ค่าเริ่มต้นไว้เป็น arbitrary value ที่มองเห็นได้แทนที่จะซ่อนไว้
ฉันควรวางสไตล์ชีตแบบเต็มหรือไม่
ตัวแปลง CSS ได้รับการออกแบบมาสำหรับบล็อกการประกาศ ใช้ตัวแปลง HTML/CSS เมื่อจำเป็นต้องใช้ตัวเลือก คลาส มาร์กอัปแบบซ้อน หรือสไตล์ชีตที่สมบูรณ์ยิ่งขึ้น

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

แปลงเพจที่ใช้งานอยู่
เป็น Tailwind CSS ที่สะอาด

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

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