รองรับคุณสมบัติ CSS อะไรบ้าง?

ระดับ spacing สำหรับ padding และ margin, สีตัวอักษรและพื้นหลัง, display, การจัดวาง flex, ขนาดและน้ำหนักตัวอักษร, border-radius, width และ height, position และ gap ที่เหลือจะกลายเป็นคลาส arbitrary แบบ [prop:value]

หากค่าไม่อยู่ในระดับมาตรฐานล่ะ?

ตัวแปลงจะออกรูปแบบ arbitrary เช่น p-[13px] หรือ bg-[#3b82f6] JIT จะคอมไพล์ และคลาสยังเป็น Tailwind ที่ใช้งานได้โดยไม่ต้องแก้มือ

รองรับตัวแปร CSS แบบกำหนดเองไหม?

รองรับ ค่าที่มี var(--token) จะถูกใส่ในวงเล็บเหลี่ยม ส่วนตัวโทเค็นยังต้องประกาศในธีมของ tailwind.config หรือเป็น custom property ใน :root

การแปลงไม่มีการสูญเสียข้อมูลจริงหรือ?

สำหรับรูปแบบทั่วไป ใช่ ส่วน animation, gradient และ selector แปลก ๆ จะเหลือเป็นคลาส arbitrary ผ่านได้แต่บางครั้งคุณอาจต้องการเก็บ CSS เดิมไว้

สามารถ round-trip กับเครื่องมือ Tailwind-to-CSS ได้ไหม?

ส่วนใหญ่ได้ utility เรียบง่ายกลับมาแบบเดียวกัน ค่าที่เป็น arbitrary ยังคงอยู่ แต่ประกาศที่ไม่รองรับจะยังเป็น arbitrary เมื่อเดินทางกลับ

มีการอัปโหลดข้อมูลหรือไม่?

ไม่ การแปลงทั้งหมดทำงานในแท็บเบราว์เซอร์นี้ เนื้อหาสไตล์ชีตของคุณไม่ออกจากหน้าเลย

CSS เป็น Tailwind — แปลงประกาศเป็น utility

CSS → utility ของ Tailwind

ออกแบบเพื่อความเป็นส่วนตัว — ทำงานในเบราว์เซอร์ของคุณทั้งหมด

วางประกาศ CSS ทางซ้าย แล้วคัดลอกคลาส utility ของ Tailwind ทางขวา ตัวแปลงจะจับคู่ระดับมาตรฐานของ spacing, สี, ตัวอักษรและเลย์เอาต์เข้ากับ utility ดั้งเดิม และเมื่อเจอค่าที่ Tailwind ไม่รู้จักก็จะถอยลงไปใช้รูปแบบในวงเล็บเหลี่ยม

คุณสมบัติที่จับคู่ได้

ตัวแปลงครอบคลุมพื้นที่ CSS ที่ใช้ในชีวิตประจำวัน: ระดับ spacing สำหรับ padding และ margin, ขนาดและความหนาตัวอักษร, สี (text และ bg), display, ทิศทางและการจัดวางของ flex, border-radius, width และ height, position และ gap แต่ละอย่างจะตกลงมาที่คำสั่งย่อมาตรฐานของ Tailwind อย่าง p-4, text-lg, justify-between ทำให้ผลลัพธ์อ่านได้เหมือน Tailwind ที่เขียนเอง

ทำไมรูปแบบ arbitrary จึงสำคัญ

โค้ดเบสจริงมักมีค่าที่ไม่มี shortcut เช่น font-size 13px แบบกำหนดเอง สีของแบรนด์ในเลขฐาน 16 จำเพาะ หรือ gap 1.7rem เมื่อตัวแปลงเจอกรณีเหล่านี้ จะออกผลในรูปแบบ arbitrary ของ Tailwind เช่น text-[13px] หรือ bg-[#3b82f6] คลาสที่ได้ยังคงเป็น Tailwind ที่ใช้งานได้ JIT คอมไพล์ได้ และวิ่งวนกลับผ่าน Tailwind-to-CSS ได้สะอาด

เมื่อใดจะแค่ผ่านไป

selector ซับซ้อน, animation, gradient และ keyframes ตั้งใจไม่ถูกแปลง เพราะอยู่ในเลเยอร์ที่ Tailwind จัดการผ่านปลั๊กอินหรือ @apply การจับคู่แบบฮิวริสติกอาจให้ผลผิด ประกาศเหล่านั้นจึงออกมาตามต้นฉบับในคลาส arbitrary แบบ [prop:value] ให้คุณรีวิวได้โดยไม่เสียข้อมูล

คำถามที่พบบ่อย

รองรับคุณสมบัติ CSS อะไรบ้าง?: ระดับ spacing สำหรับ padding และ margin, สีตัวอักษรและพื้นหลัง, display, การจัดวาง flex, ขนาดและน้ำหนักตัวอักษร, border-radius, width และ height, position และ gap ที่เหลือจะกลายเป็นคลาส arbitrary แบบ [prop:value]
หากค่าไม่อยู่ในระดับมาตรฐานล่ะ?: ตัวแปลงจะออกรูปแบบ arbitrary เช่น p-[13px] หรือ bg-[#3b82f6] JIT จะคอมไพล์ และคลาสยังเป็น Tailwind ที่ใช้งานได้โดยไม่ต้องแก้มือ
รองรับตัวแปร CSS แบบกำหนดเองไหม?: รองรับ ค่าที่มี var(--token) จะถูกใส่ในวงเล็บเหลี่ยม ส่วนตัวโทเค็นยังต้องประกาศในธีมของ tailwind.config หรือเป็น custom property ใน :root
การแปลงไม่มีการสูญเสียข้อมูลจริงหรือ?: สำหรับรูปแบบทั่วไป ใช่ ส่วน animation, gradient และ selector แปลก ๆ จะเหลือเป็นคลาส arbitrary ผ่านได้แต่บางครั้งคุณอาจต้องการเก็บ CSS เดิมไว้
สามารถ round-trip กับเครื่องมือ Tailwind-to-CSS ได้ไหม?: ส่วนใหญ่ได้ utility เรียบง่ายกลับมาแบบเดียวกัน ค่าที่เป็น arbitrary ยังคงอยู่ แต่ประกาศที่ไม่รองรับจะยังเป็น arbitrary เมื่อเดินทางกลับ
มีการอัปโหลดข้อมูลหรือไม่?: ไม่ การแปลงทั้งหมดทำงานในแท็บเบราว์เซอร์นี้ เนื้อหาสไตล์ชีตของคุณไม่ออกจากหน้าเลย