ตัวเรียงลำดับ Class ของ Tailwind CSS
จัดเรียง utility class ของ Tailwind CSS ให้อยู่ในลำดับมาตรฐานทันที คง variants (hover:, md:, dark:), arbitrary values และ class ซ้ำไว้ครบ ฟรี เป็นส่วนตัว
Loading tool...
ตัวเรียงลำดับ Class ของ Tailwind CSS คืออะไร?
ตัวเรียงลำดับ Class ของ Tailwind CSS รับรายการ utility class คั่นด้วยช่องว่างแล้วจัดเรียงใหม่เป็นลำดับมาตรฐานที่แน่นอน — layout ก่อน ตามด้วย box model, typography, พื้นหลัง, เส้นขอบ, เอฟเฟกต์ และ interactivity — โดยคง variants, arbitrary values และ class ซ้ำไว้ครบ
ประโยชน์หลัก
- JSX สม่ำเสมออ่านง่ายตอน review โดยไม่ต้องติดตั้ง tooling อะไร
- diff ที่ไม่มีความหมายใน version control น้อยลง
- variants ถูกจัดกลุ่มไว้ข้าง base utility อย่างคาดเดาได้
- ลบ class ซ้ำได้ตามต้องการเพื่อรายการ class ที่สะอาดกว่า
กรณีการใช้งาน
- •ทำ className ที่เขียนมือให้เป็นมาตรฐานตอน review โค้ด
- •เก็บกวาด class ที่วางมาจากโค้ดที่ AI generate หรือโค้ดเก่า
- •บังคับ style ของ class ให้เหมือนกันทั้งทีมโดยไม่ใช้ Prettier plugin
- •ตรวจสอบ class ซ้ำในรายการก่อน commit
วิธีใช้ตัวเรียงลำดับ Class ของ Tailwind CSS
- วาง class ของคุณ: คัดลอก string ใน className จาก JSX มาวางในช่องข้อความ หรือกดโหลดตัวอย่างเพื่อลองเล่นดู
- เลือกวิธีจัดการ class ซ้ำ: ปล่อยช่องลบ class ซ้ำไว้เพื่อคงทุก class ไว้ หรือติ๊กเพื่อลบ token ที่ซ้ำอัตโนมัติ
- ตรวจสอบผลลัพธ์: class จะเรียงตามลำดับมาตรฐานทันที: layout, box model, typography, พื้นหลัง, เส้นขอบ, เอฟเฟกต์, interactivity โดย variants อยู่กับ base utility ของมันเสมอ
- คัดลอกผลลัพธ์: กดคัดลอกแล้ววาง class ที่จัดเรียงแล้วกลับเข้าโค้ด ส่วน class แบบ custom ที่ไม่รู้จักจะเรียงท้ายสุดตามตัวอักษร
คุณสมบัติหลัก
- จัดเรียงตามลำดับมาตรฐานอิงจาก prettier-plugin-tailwindcss
- รองรับ variant chain เต็มรูปแบบ: dark:md:hover:bg-blue-500 ครบถ้วน
- คง arbitrary values อย่าง w-[13px] และ bg-[#1da1f2] ไว้เป๊ะ ๆ
- ลบ class ซ้ำได้ในคลิกเดียว
- สถิติสด: จำนวน class, ตัวซ้ำ, token ที่ไม่รู้จัก
- ทำงานฝั่ง client ล้วน — โค้ดของคุณไม่ออกจากเบราว์เซอร์
คำถามที่พบบ่อย
การเรียง class จะกระทบการแสดงผลของ style ไหม?
ไม่กระทบ ลำดับ class ใน attribute ไม่มีผลต่อ CSS specificity ใน Tailwind ผลลัพธ์ที่ render ออกมาเหมือนเดิมทุกอย่าง — เปลี่ยนแค่ความสม่ำเสมอของโค้ดต้นฉบับ
ลำดับการเรียงต่างจาก prettier-plugin-tailwindcss อย่างไร?
ลำดับมาตรฐานอิงจาก prettier-plugin-tailwindcss: layout, box model, typography, พื้นหลัง, เส้นขอบ, เอฟเฟกต์ และ interactivity ถือเป็นการจัดเรียงที่ใกล้เคียงมาก แต่ไม่ใช่ clone ที่เหมือนกันทุกไบต์
variants อย่าง md: และ hover: ได้รับการจัดการอย่างไร?
variant chain ถูกคงไว้ครบถ้วนและจัดกลุ่มไว้กับ base utility ของมัน class ที่มี variant น้อยกว่าจะเรียงก่อน เช่น p-4 มาก่อน md:p-8 แล้วตามด้วย md:hover:p-8
arbitrary values และ class แบบ custom ปลอดภัยไหม?
arbitrary values อย่าง w-[calc(100%-2rem)] หรือ bg-[#1da1f2] ถูกคงไว้ทั้งหมด รวมถึง colon ที่อยู่ในวงเล็บเหลี่ยม ส่วน class custom ที่ไม่รู้จักจะไม่ถูกตัดทิ้ง — แค่เรียงท้ายสุดตามตัวอักษร