มีอะไรถูกแปลงบ้าง?

utility ของ Tailwind ที่พบบ่อยสำหรับ spacing, สี, ตัวอักษร, flex และ position รวมถึงรูปแบบ arbitrary แบบ [value] หรือ [prop:value] ส่วน variant ยังไม่รองรับ

ทำไมต้องระบุ selector?

ผลลัพธ์เป็นกฎ CSS เดียว การกำหนด selector ล่วงหน้าทำให้คุณวางลงสไตล์ชีตได้โดยตรง โดยไม่ต้องเปลี่ยนชื่อหรือห่อหุ้มใหม่

รองรับ variant แบบ responsive หรือ hover ไหม?

ยังไม่รองรับ ต้องใช้ตัวห่อ media query หรือ pseudo-class โปรดเอา prefix อย่าง md:, hover:, dark: ออกก่อนวาง utility พื้นฐานสามารถ round-trip ได้สะอาด

รู้จักธีม Tailwind ของฉันไหม?

ไม่รู้จัก ระบบใช้สเกลเริ่มต้น หากคุณปรับ spacing หรือสีเอง ผลลัพธ์จะตกเป็น arbitrary แต่ CSS ยังใช้งานได้

สามารถส่ง CSS กลับเข้าเครื่องมือทิศตรงข้ามได้ไหม?

ได้ utility ที่เป็นพื้นฐานจะ round-trip แบบเหมือนเดิมทุกประการ ส่วนค่าที่เป็น arbitrary จะอยู่ครบ และประกาศที่ไม่รองรับยังคงเป็นคลาส arbitrary

อินพุตของฉันถูกอัปโหลดไหม?

ไม่ การแปลงทั้งหมดทำงานในแท็บนี้ Toova จะไม่เห็นรายการคลาส selector หรือผลลัพธ์ของคุณ

Tailwind เป็น CSS — utility สู่กฎเดียว

Utility ของ Tailwind → CSS

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

วางรายการคลาส utility ของ Tailwind พร้อม selector แล้ว Toova จะสร้างกฎ CSS ที่ตรงกัน คลาส arbitrary อย่าง p-[13px] หรือ [grid-template-columns:1fr_2fr] จะถูกแกะออกเป็นประกาศดิบที่พร้อมหย่อนใส่สไตล์ชีตได้ทันที

ตอนไหนทิศย้อนกลับมีประโยชน์

บางครั้งคุณสร้างต้นแบบด้วย Tailwind แต่ต้องส่งมอบ CSS เช่น อีเมลการตลาด วิดเจ็ตของบุคคลที่สาม หรือส่งให้ CMS ที่ไม่โหลด Tailwind ตัวแปลงจะรวมรายการ utility เป็นกฎเดียวภายใต้ selector ที่คุณเลือก เพื่อให้คุณวางใช้งานได้ทันทีโดยไม่ต้องเปลี่ยนชื่อหรือไล่ล้างมาร์กอัปของ playground

ค่าตัว arbitrary กลับมาอย่างไร

คลาส arbitrary ของ Tailwind จะพ่วงค่ามาในตัวเอง p-[13px] หมายถึง padding: 13px, [grid-template-columns:1fr_2fr] หมายถึง grid-template-columns: 1fr 2fr ตัวแปลงจะแกะทั้งสองรูปแบบตามตัวอักษร ฉะนั้นค่าใด ๆ ที่คุณเข้ารหัสไว้ผ่าน JIT จะยังอยู่ครบโดยไม่ต้องใช้ตารางแมปเพิ่มเติม

ข้อจำกัดและการวนกลับ

variant แบบ responsive (md:flex), variant สถานะ (hover:bg-black) และโหมดมืด (dark:text-white) ต้องใช้ตัวห่อ media query หรือ pseudo-class ตัวแปลงจึงยังไม่สร้างให้ กรุณานำออกก่อนวาง โทเค็นของธีม (text-brand) จะกลับไปใช้ระดับเริ่มต้นของ Tailwind ถ้าคุณปรับธีมเอง ก็จะเห็น fallback แบบ arbitrary utility ทั่วไป round-trip ได้สะอาดกับเครื่องมือ CSS-to-Tailwind

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

มีอะไรถูกแปลงบ้าง?: utility ของ Tailwind ที่พบบ่อยสำหรับ spacing, สี, ตัวอักษร, flex และ position รวมถึงรูปแบบ arbitrary แบบ [value] หรือ [prop:value] ส่วน variant ยังไม่รองรับ
ทำไมต้องระบุ selector?: ผลลัพธ์เป็นกฎ CSS เดียว การกำหนด selector ล่วงหน้าทำให้คุณวางลงสไตล์ชีตได้โดยตรง โดยไม่ต้องเปลี่ยนชื่อหรือห่อหุ้มใหม่
รองรับ variant แบบ responsive หรือ hover ไหม?: ยังไม่รองรับ ต้องใช้ตัวห่อ media query หรือ pseudo-class โปรดเอา prefix อย่าง md:, hover:, dark: ออกก่อนวาง utility พื้นฐานสามารถ round-trip ได้สะอาด
รู้จักธีม Tailwind ของฉันไหม?: ไม่รู้จัก ระบบใช้สเกลเริ่มต้น หากคุณปรับ spacing หรือสีเอง ผลลัพธ์จะตกเป็น arbitrary แต่ CSS ยังใช้งานได้
สามารถส่ง CSS กลับเข้าเครื่องมือทิศตรงข้ามได้ไหม?: ได้ utility ที่เป็นพื้นฐานจะ round-trip แบบเหมือนเดิมทุกประการ ส่วนค่าที่เป็น arbitrary จะอยู่ครบ และประกาศที่ไม่รองรับยังคงเป็นคลาส arbitrary
อินพุตของฉันถูกอัปโหลดไหม?: ไม่ การแปลงทั้งหมดทำงานในแท็บนี้ Toova จะไม่เห็นรายการคลาส selector หรือผลลัพธ์ของคุณ