เครื่องมือแปลง CSS เป็น Tailwind — แปลง CSS เป็นคลาส Tailwind
แปลงคำประกาศ CSS เป็นคลาสยูทิลิตี Tailwind CSS โดยแสดงเป็นกฎ @apply สำหรับแต่ละ selector ใช้ค้นหายูทิลิตีที่ตรงกันเมื่อต้องย้ายสไตล์เดิม เครื่องมือรองรับ Tailwind CSS v3
ค้นหายูทิลิตี Tailwind ที่ตรงกับกฎ CSS เดิมระหว่างย้ายระบบ
เหมาะกับงานแบบไหน
- ค้นหายูทิลิตี Tailwind ที่ตรงกับกฎ CSS เดิมระหว่างย้ายระบบ
- เรียนรู้ชื่อคลาส Tailwind โดยแปลง CSS ที่คุณรู้จักอยู่แล้ว
วิธีใช้
- วางกฎ CSS
- ปรับค่า rem พื้นฐานหรือการตั้งค่า Tailwind หากโปรเจกต์ใช้ค่ากำหนดเอง
- คัดลอกคลาสหลัง @apply ลงมาร์กอัปหรือสไตล์ชีต แล้วตรวจผลลัพธ์ในโปรเจกต์ Tailwind
ข้อมูลเข้า CSS
.card { display: flex; padding: 1rem; }ผลลัพธ์ Tailwind (สเกลเริ่มต้น)
.card {
@apply flex p-4;
}รายละเอียดและข้อจำกัด
ชื่อคลาสและสเกลใช้ Tailwind CSS v3 ไม่รับประกันความเข้ากันได้กับการตั้งค่าและไวยากรณ์ Tailwind CSS v4
ค่ากำหนดเอง selector ที่ซับซ้อน และ pseudo-elements อาจแปลงไม่ได้ ไม่รับประกันว่าผลลัพธ์จะดูเหมือนเดิม จึงควรตรวจบนหน้าจริง
ช่องการตั้งค่ากำหนดเองจะถูกประเมินเป็น JavaScript ในเบราว์เซอร์ อย่าวางการตั้งค่าที่ไม่เชื่อถือ
FAQ
รองรับ Tailwind CSS v4 หรือไม่?
ใช้ชื่อคลาสและสเกล Tailwind CSS v3 ยูทิลิตีหลายตัว เช่น flex, p-4 และ text-sm ใช้ชื่อเดิมใน v4 แต่ v4 ย้ายการตั้งค่าไปอยู่ใน CSS และเปลี่ยนชื่อบางยูทิลิตี จึงควรตรวจผลลัพธ์ในโปรเจกต์ v4
ใช้ชื่อคลาสแทน @apply อย่างไร?
คัดลอกรายการหลัง @apply ลงแอตทริบิวต์ class ขององค์ประกอบ เช่น class="flex p-4" รูปแบบ @apply จัดกลุ่มคลาสตาม selector เดิม
แปลงคลาส Bootstrap เป็น Tailwind ได้หรือไม่?
ไม่ได้ เครื่องมือนี้แปลงคำประกาศ CSS ไม่ใช่ชื่อคลาสจากเฟรมเวิร์กอื่น วางกฎ CSS ของคอมโพเนนต์ Bootstrap เพื่อดูยูทิลิตีที่ตรงกัน
ทำไมบางคำประกาศจึงไม่ถูกแปลง?
ค่านอกสเกล Tailwind, selector ที่ซับซ้อน และ pseudo-elements อาจไม่มียูทิลิตีตรงกัน ให้คงเป็น CSS หรือเพิ่มในการตั้งค่า Tailwind