ตัวแปลง CSS เป็น Tailwind
ตัวแปลง CSS เป็น Tailwind ออนไลน์ฟรี วาง CSS rule แล้วได้ Tailwind utility class ที่เทียบเท่าทันที รองรับ display, flex, grid, spacing, typography, border, color และ shadow ทำงาน 100% ฝั่ง client
Loading tool...
ตัวแปลง CSS เป็น Tailwind คืออะไร?
ตัวแปลง CSS เป็น Tailwind เป็นเครื่องมือใน browser ที่แยกวิเคราะห์ CSS rule block มาตรฐานและแมป declaration แต่ละตัวไปยัง Tailwind CSS utility class ที่เทียบเท่า รองรับคุณสมบัติที่ใช้บ่อย เช่น layout (display, position, flex, grid), spacing (margin, padding, gap), typography (font-size, font-weight, line-height, letter-spacing), border, border-radius, color, shadow, opacity และ transition declaration ที่ไม่มี Tailwind class ตรงตัวจะแสดงเป็น arbitrary value เพื่อไม่ให้สูญเสียข้อมูล
ประโยชน์หลัก
- ย้ายจาก CSS ที่เขียนเองไป Tailwind ได้เร็วขึ้น
- แมปอัตโนมัติสำหรับคุณสมบัติที่ใช้บ่อยกว่า 30 รายการ
- แสดง arbitrary value สำหรับ declaration ที่แมปไม่ได้
- คัดลอก class string ได้ทันทีตาม block
กรณีการใช้งาน
- •ย้าย codebase CSS เก่าไปยัง Tailwind
- •เรียนรู้ว่า CSS ตัวไหน map ไป Tailwind utility ตัวไหน
- •ตรวจสอบ CSS เพื่อหา utility class ที่เทียบเท่า
- •ปรับโครงสร้าง stylesheet ของ component
วิธีใช้ตัวแปลง CSS เป็น Tailwind
- วาง CSS: วาง CSS rule block ตั้งแต่หนึ่ง block (selector พร้อมเนื้อหาในวงเล็บปีกกา) ลงในกล่องป้อนข้อมูล
- ตรวจผลลัพธ์: แต่ละ rule block จะปรากฏทางขวาพร้อม Tailwind utility class ที่เทียบเท่าแสดงเป็น chip
- ตรวจคุณสมบัติที่แมปไม่ได้: declaration ที่ไม่มี Tailwind class ตรงตัวจะแสดงพร้อม arbitrary value เช่น [font-size:13px]
- คัดลอก class: ใช้ Copy ใต้แต่ละ block หรือ Copy all เพื่อคัดลอกทุก selector พร้อม class string
คุณสมบัติหลัก
- แมปคุณสมบัติ CSS ที่ใช้บ่อยกว่า 30 รายการไปยัง Tailwind utility class
- แยกวิเคราะห์ CSS rule block ได้หลาย block ในครั้งเดียว
- รองรับ padding/margin เชิงทิศทาง (pt, pr, pb, pl, mt, mr, mb, ml)
- ส่งค่า hex และ rgb/rgba color ผ่านเป็น arbitrary value
- แสดงคุณสมบัติที่แมปไม่ได้พร้อม arbitrary value
- ทำงาน 100% ฝั่ง client ไม่ส่งข้อมูลไปเซิร์ฟเวอร์