ตัวแปลง CSS เป็น Tailwind: แปลงกฎ CSS ออนไลน์
ตัวแปลง CSS เป็น Tailwind นี้อ่านบล็อกกฎ CSS แล้วจับคู่ดีคลารเรชันกับยูทิลิตี Tailwind เมื่อไม่มียูทิลิตีแบบมีชื่อ จะใช้ไวยากรณ์ arbitrary-value เช่น w-[137px] ดีคลารเรชันที่แปลงไม่ได้จะแสดงเป็นรายการแทนการตัดทิ้งเงียบ ๆ เลือก Tailwind v3 หรือ v4 ให้ตรงกับโปรเจกต์ แล้วคัดลอกผลลัพธ์ที่แปลงได้เพื่อตรวจทานและใช้งาน
ตัวแปลง CSS เป็น Tailwind อ่านบล็อกกฎ CSS และจับคู่ดีคลารเรชันกับยูทิลิตี Tailwind ใช้แปลง CSS เป็น Tailwind ออนไลน์เมื่อต้องการตรวจสอบยูทิลิตีที่เทียบเท่ากันโดยไม่ต้องค้นหาดีคลารเรชันทีละตัวด้วยมือ ผลลัพธ์แยกดีคลารเรชันที่จับคู่กับยูทิลิตีแบบมีชื่อออกจากค่าที่ต้องใช้ไวยากรณ์ arbitrary-value เช่น w-[137px]
เลือก Tailwind v3 หรือ v4 ให้ตรงกับเวอร์ชันที่โปรเจกต์ใช้ ตัวแปลงใช้ไวยากรณ์ arbitrary-value สำหรับดีคลารเรชันที่มียูทิลิตีแบบมีชื่อไม่ได้ และแสดงดีคลารเรชันที่จับคู่ไม่ได้เป็นรายการเพื่อไม่ให้หายไปเงียบ ๆ ตารางการจับคู่ของมันอยู่ในโมดูลข้อมูลโมดูลเดียว ไม่ได้กระจายอยู่ในตรรกะการแปลง
กฎ CSS แสดงสไตล์ผ่านดีคลารเรชัน ส่วน Tailwind ใช้สไตล์ผ่านคลาสยูทิลิตี การแปลงบล็อกกฎช่วยได้เมื่อย้ายสไตล์เดิมไปยัง Tailwind หรือตรวจสอบว่าดีคลารเรชันสามารถแสดงด้วยยูทิลิตีอย่างไร ตัวเลือกเวอร์ชันและรายการที่แปลงไม่ได้ช่วยให้ตรวจทานผลลัพธ์ตามความต้องการของโปรเจกต์ได้ง่ายขึ้น
ตัวแปลงทำงานในเบราว์เซอร์ของคุณทั้งหมด: ข้อมูลเข้าประมวลผลบนอุปกรณ์ของคุณ ไม่ได้อัปโหลด จัดเก็บ หรือส่งไปยังเซิร์ฟเวอร์ ใช้งานออฟไลน์ได้เมื่อโหลดหน้าแล้ว จึงแปลงต่อได้โดยไม่ต้องเชื่อมต่อ เครื่องมือนี้ฟรี และไม่ต้องติดตั้งอะไรในเครื่องเพื่อใช้งาน
นักพัฒนาและวิศวกร DevOps สามารถใช้ตัวแปลงสำหรับการตรวจสอบ CSS เป็น Tailwind อย่างรวดเร็ว ไม่ว่าจะเพิ่งเริ่มใช้ Tailwind หรือดูแลโปรเจกต์เดิมอยู่ วางหรือป้อนบล็อกกฎ CSS เลือกเวอร์ชัน Tailwind ตรวจทานดีคลารเรชันที่จับคู่ได้และที่แปลงไม่ได้ แล้วคัดลอกผลลัพธ์
ขั้นตอนที่ 1: วางหรือป้อนบล็อกกฎ CSS ตัวแปลงจะอ่านดีคลารเรชันและจับคู่กับยูทิลิตี Tailwind
ขั้นตอนที่ 2: เลือก Tailwind v3 หรือ v4 เลือกเวอร์ชันที่ตรงกับโปรเจกต์ Tailwind ที่คุณกำลังทำ
ขั้นตอนที่ 3: แปลง CSS ผลลัพธ์ใช้ยูทิลิตีแบบมีชื่อเมื่อมี และไวยากรณ์ arbitrary-value สำหรับค่าที่ไม่มียูทิลิตีแบบมีชื่อ
ขั้นตอนที่ 4: ตรวจสอบดีคลารเรชันที่แปลงไม่ได้ ตรวจดูรายการเพื่อดูว่าดีคลารเรชันใดไม่ได้ถูกแปลง
ขั้นตอนที่ 5: คัดลอกผลลัพธ์ ตรวจทานยูทิลิตีที่สร้างก่อนนำไปใช้ในโปรเจกต์
กรณีการใช้งาน: แปลงบล็อกกฎ CSS เป็นยูทิลิตี Tailwind ขณะย้ายระบบ รายการที่แปลงไม่ได้ช่วยระบุว่าดีคลารเรชันใดต้องดูแลเพิ่มเติม
กรณีการใช้งาน: ตรวจสอบว่าดีคลารเรชัน CSS ใดจับคู่กับยูทิลิตี Tailwind อย่างไร ไวยากรณ์ arbitrary-value สามารถแสดงค่าที่ไม่มียูทิลิตีแบบมีชื่อได้
กรณีการใช้งาน: เปรียบเทียบผลการแปลงสำหรับ Tailwind v3 และ v4 เลือกเวอร์ชันที่ตรงกับโปรเจกต์ที่กำลังอัปเดต
กรณีการใช้งาน: จัดการการแปลง CSS เป็น Tailwind ตามปกติโดยไม่ต้องติดตั้งอะไรในเครื่อง วางบล็อกกฎลงในเครื่องมือบนเบราว์เซอร์แล้วคัดลอกผลลัพธ์
กรณีการใช้งาน: ทำการแปลงจากเครื่องไหนก็ได้ที่กำลังใช้ เครื่องมือทำงานในเบราว์เซอร์ของคุณ และยังใช้งานออฟไลน์ต่อได้หลังโหลดหน้าแล้ว
กรณีการใช้งาน: แปลง CSS ภายในโดยไม่ส่งไปยังบริการภายนอก ข้อมูลเข้าประมวลผลในเบราว์เซอร์ของคุณ ไม่ได้ส่งไปยังเซิร์ฟเวอร์