แปลง Tailwind CSS
เป็น Inline HTML สำหรับอีเมล
วาง HTML ที่ใช้ class ของ Tailwind แล้วแปลงเป็น style="..." แบบ inline ทันที — รองรับสี ระยะ ฟอนต์ เส้นขอบ และโค้งมน พร้อมพรีวิวเหมือนส่งจริง ทำงานบนเบราว์เซอร์ 100%
Tailwind → Inline
แปลง class เป็น style แบบ email-safe
วางโค้ดทั้งหน้าหรือแค่ snippet ก็ได้ — รองรับ class="...", arbitrary bg-[#FF5C00] และ responsive prefix md: (จะถูกตัดออกเพราะอีเมลไม่รองรับ)
ผลลัพธ์จะแสดงที่นี่ — กด “แปลงเป็น Inline” เพื่อเริ่มพรีวิวบนพื้นขาวแบบไคลเอนต์อีเมล — ลองสลับธีมดูโค้ดด้วยแท็บ “โค้ด”
ยังไม่มีผลลัพธ์ — กดแปลงก่อนเพื่อตรวจความเข้ากันได้กับอีเมล
ทิป: อีเมลส่วนใหญ่ไม่รองรับ flex / grid / position แบบเต็ม — ถ้าเลย์เอาต์ซับซ้อน แนะนำใช้ table เป็นโครง แล้วใช้ Tailwind เฉพาะสี/ระยะ/ตัวอักษร เครื่องนี้จะเตือนให้ในแท็บ “ตรวจอีเมล”
ประมวลผลบนเครื่องด้วย DOMParser + inline mapper ไม่ส่ง HTML ออกนอกเบราว์เซอร์ · ทางลัด: Ctrl+Enter แปลง · Ctrl+K ล้าง
แปลงทันที ไม่ต้อง build
วาง HTML แล้วกดแปลง — แม็ป Tailwind กว่า 300+ class เป็น inline style อัตโนมัติ รองรับสี Tailwind 22 เฉด, arbitrary bg-[#...] และระยะทุก scale
อีเมลเซฟ 100%
ตัด class ออก ใส่ style inline ที่ Gmail/Outlook รองรับ ตรวจ flex/grid/shadow แล้วเตือนทันที พร้อมพรีวิวบนพื้นขาวเหมือนไคลเอนต์จริง
เป็นส่วนตัว ไฟล์อยู่บนเครื่อง
ทุกอย่างรันด้วย JavaScript ในเบราว์เซอร์ ไม่มีการอัปโหลด HTML ขึ้นเซิร์ฟเวอร์ ปิดแท็บแล้วหายทันที เหมาะกับโค้ดลูกค้าที่เป็นความลับ
คำถามที่พบบ่อย
Tailwind class ไหนแปลงได้บ้าง?
รองรับกลุ่มที่ใช้บ่อยในอีเมล: ระยะ p-*, m-*, gap-*, ขนาด w-*, h-*, max-w-*, สี bg-*, text-*, border-* ครบ 22 เฉด + arbitrary bg-[#...], ตัวอักษร text-xs–9xl, font-*, leading-*, tracking-*, จัดวาง text-left/center/right, block/inline/hidden, เส้นขอบ border, rounded-* และเงา shadow แบบย่อ — ส่วน flex/grid/position จะแปลงได้แต่จะมีคำเตือนว่าไม่ปลอดภัยใน Outlook
ทำไมอีเมลต้องใช้ inline style แทน class?
ไคลเอนต์อีเมลจำนวนมาก โดยเฉพาะ Gmail และ Outlook ตัด <style> และไฟล์ CSS ภายนอกออก เหลือเพียง style="..." บนแต่ละแท็กเท่านั้นที่คงอยู่จริง — การแปลง Tailwind class เป็น inline จึงทำให้สี ระยะ และฟอนต์แสดงผลเหมือนที่ออกแบบไว้ ไม่เพี้ยนเมื่อส่งจริง
Gmail / Outlook รองรับอะไรบ้าง?
รองรับดี: สีพื้น/ตัวอักษร, padding/margin, font-size/weight/line-height, text-align, border/border-radius, width/height แบบ px/%, display:block/inline-block — ระวัง: flex, grid, position:absolute, gap, shadow, backdrop-blur ใช้ไม่ได้ใน Outlook (Word engine) และบางเวอร์ชันของ Gmail แอป เครื่องนี้จะขึ้นเตือนในแท็บ “ตรวจอีเมล” ให้สลับไปใช้ table แทน
เอาโค้ดที่แปลงแล้วไปใช้กับ Mailchimp / SendGrid ยังไง?
กด “คัดลอก Inline HTML” แล้ววางลงในบล็อก Code / HTML ของ Mailchimp, Brevo, SendGrid หรือ Postmark ได้เลย — หากเป็นเทมเพลตเต็มหน้า ให้ดาวน์โหลดเป็น .html แล้วอัปโหลดเป็น Custom Template จะคงสไตล์ครบโดยไม่ต้องใส่ <link> เพิ่มอีก
ปลอดภัยไหม? ข้อมูลถูกส่งไปไหน?
ปลอดภัย 100% — การแปลงทำด้วย DOMParser บนเครื่องคุณเท่านั้น ไม่มีการส่ง HTML ขึ้นเซิร์ฟเวอร์ ไม่เก็บ log และไม่มีการเรียก API ภายนอก ปิดแท็บหรือกด “ล้างทั้งหมด” ข้อมูลจะหายทันที เหมาะกับโค้ดที่เป็นความลับของลูกค้า