แปลง CSS เป็น Tailwind

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

CSS
Tailwind v4

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

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

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

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

การประกาศ-การแปลงครั้งแรก
วางบล็อกการประกาศ CSS และ Tailfind นำไปใช้กับองค์ประกอบตัวอย่างก่อนที่จะแปลงผลลัพธ์ที่เรนเดอร์เป็นคลาส Tailwind ที่นำมาใช้ซ้ำได้
ให้ความสำคัญกับคลาสมาตรฐาน
ค่าเริ่มต้นแบบพกพา Tailwind จะถูกรักษาไว้เมื่อค่าการประกาศตรงกับขนาดของกรอบงาน
ทางเลือกมูลค่าตามอำเภอใจ
ค่าที่ไม่ใช่ค่าเริ่มต้นจะกลายเป็น arbitrary value ที่ชัดเจน จึงตรวจสอบ pixel สี เงา และ timing แบบกำหนดเองได้ง่าย
เอาต์พุตที่ปลอดภัยสำหรับเค้าโครง
การเว้นวรรค การกำหนดขนาด การแสดงผล ตาราง ดิ้น เส้นขอบ เงา และตัวพิมพ์จะถูกแมปจากตัวอย่างที่แสดงผล
การสกัดคลาสอย่างรวดเร็ว
เอาต์พุตคือรายการคลาส Tailwind ที่โฟกัสซึ่งพร้อมที่จะคัดลอกไปยังส่วนประกอบ โทเค็นที่ขัดขวาง หรือรหัสผ่านการล้างข้อมูล
ดีสำหรับการตรวจสอบ
ใช้แทนบล็อก 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 ที่ใช้งานจริงได้โดยตรงจากหน้าที่คุณกำลังดู

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