ตัวย้าย Tailwind v3 เป็น v4
แปลง theme object จาก tailwind.config.js เป็น @theme block ของ v4 ออนไลน์ฟรี ตัวแปรสีและฟอนต์ OKLCH hint อัตโนมัติ และคำเตือนตัวเลือกที่ถูกถอด ไม่ต้องอัปโหลด
Loading tool...
ตัวย้าย Tailwind v3 เป็น v4 คืออะไร?
ตัวย้าย Tailwind v3 เป็น v4 แปลง theme object ของ v3 เป็น @theme block แบบ CSS-first ของ v4 ได้โดยตรงในเบราว์เซอร์ สีถูกแผ่เป็นตัวแปร --color- แบบมีขีด ชุดฟอนต์กลายเป็นตัวแปร --font- สี hex ทุกตัวได้ comment OKLCH hint ที่คำนวณให้ และตัวเลือกที่มีแค่ใน v3 เช่น darkMode, container, corePlugins และ safelist จะถูกแจ้งเตือนพร้อมคำแนะนำ
ประโยชน์หลัก
- ไม่ต้องเขียนตัวแปร theme ใหม่ด้วยมือ
- พาเลตต์ซ้อนกลายเป็นชื่อตัวแปรแบบขีดที่ใช้ได้
- OKLCH hint เชิงการรับรู้คำนวณด้วยคณิตศาสตร์ OKLab มาตรฐาน
- ตัวเลือก v3 ที่ถูกถอดถูกแจ้งพร้อมทางเลือกแทน
- เป็นส่วนตัวและทันที - parsing ทำงานในเบราว์เซอร์
กรณีการใช้งาน
- •อัปเกรด config ของ design system ไป Tailwind v4
- •ดึงสีแบรนด์ออกมาเป็นตัวแปร CSS สำหรับงานนอก Tailwind
- •ตรวจ config เก่าหาตัวเลือกที่ถูกถอดใน v3
- •สร้างค่า OKLCH จากพาเลตต์ hex ที่มีอยู่
วิธีย้าย Tailwind Config ไป v4
- วาง config: วาง tailwind.config.js ของคุณ - อย่างน้อยต้องมี theme object ที่มี colors หรือ fontFamily
- ดู @theme block: ตัวแปร CSS ของ v4 จะแสดงทางขวา พร้อม OKLCH hint ข้างสี hex ทุกตัว
- อ่านคำเตือน: ตัวเลือกที่ถูกถอด เช่น darkMode หรือ corePlugins จะถูกแสดงพร้อมคำแนะนำการย้าย
- คัดลอกลง CSS: คัดลอก @theme block ลงสไตล์ชีตหลัก หรือดาวน์โหลดเป็นไฟล์ CSS
คุณสมบัติหลัก
- ดึง colors และ fontFamily จากข้อความ config v3 ใด ๆ
- พาเลตต์ซ้อนถูกแผ่เป็นตัวแปร --color- แบบมีขีด
- key DEFAULT ยุบรวมเข้าชื่อตัวแปรแม่
- สี hex ได้ comment OKLCH hint ที่คำนวณให้
- เตือน darkMode, container, corePlugins, safelist
- คัดลอกหรือดาวน์โหลด @theme block เป็นไฟล์ CSS