แปลง Tailwind เป็น CSS
แปลง Tailwind CSS เป็น CSS ธรรมดาออนไลน์ฟรี ขยาย utility class strings เป็น CSS rules พร้อมค่าสี spacing และฟอนต์ที่แม่นยำ รองรับ variant hover, focus,
Loading tool...
แปลง Tailwind เป็น CSS คืออะไร?
ตัวแปลง Tailwind เป็น CSS รับชื่อ class แบบ utility-first เช่น flex items-center justify-between p-4 bg-blue-500 rounded-lg แล้วสร้าง CSS rules ธรรมดาที่เทียบเท่ากัน ทั้งค่า hex color, spacing หน่วย rem, ขนาดฟอนต์พร้อม line height, radius และ shadow จาก design system เริ่มต้นของ Tailwind v3 รองรับการแปลง variant prefix ด้วย: hover และ focus กลายเป็น pseudo-selector, responsive prefix กลายเป็น min-width media query ที่จัดกลุ่มท้ายผลลัพธ์ และ dark กลายเป็น prefers-color-scheme query เหมาะมากเมื่อคุณต้องการ CSS จริงโดยไม่ต้องเพิ่ม Tailwind เข้าไปใน build pipeline
ประโยชน์หลัก
- ได้ CSS ธรรมดาที่วางลงโปรเจกต์ใดก็ได้ โดยไม่ต้องติดตั้งเครื่องมือ Node.js หรือ PostCSS plugin
- เห็นชัดว่า utility แต่ละตัว compile ไปเป็นอะไร ใช้เป็นทั้งตัวช่วยเรียนรู้และ debug
- ดึงเฉพาะ style ที่ใช้จริง แทนการแถม stylesheet ของ framework ทั้งก้อน
- flag class ที่ยังไม่รองรับอย่างชัดเจน ไม่มีอะไรหายไปจากผลลัพธ์เงียบๆ
- ทำงานฝั่ง client ทั้งหมด - markup ส่วนตัวอยู่กับเครื่องคุณ
กรณีการใช้งาน
- •แปลง prototype ที่เขียนด้วย Tailwind เป็น CSS ธรรมดาสำหรับ static site หรือ email template
- •เรียนรู้ว่า Tailwind utility สร้าง declaration อะไรบ้าง โดยดูจากผลลัพธ์จริง
- •แชร์ component snippet เล็กๆ ให้คนที่ไม่ได้ใช้ Tailwind
- •ลดภาระของ framework โดยแทน Tailwind style ที่ไม่ได้ใช้ด้วยเฉพาะ rules ที่จำเป็น
วิธีแปลง Tailwind Classes เป็น CSS
- วาง classes ของคุณ: คัดลอก className attribute หรือรายการ Tailwind utility classes แล้ววางลงในช่อง input
- ตรวจ CSS ที่สร้างได้: เครื่องมือขยายทุก class ที่รู้จักให้เป็น CSS rule ที่เทียบเท่ากันทันที โดยใช้ design token เริ่มต้นของ Tailwind v3
- เช็ค class ที่ไม่รองรับ: Class ใดที่อยู่นอกตาราง mapping ในตัวจะแสดงในรายการเตือน เพื่อให้คุณรู้ว่าอะไรถูกข้ามไป
- คัดลอกหรือดาวน์โหลดผลลัพธ์: กด Copy CSS เพื่อคัดลอก rules หรือดาวน์โหลดเป็นไฟล์ .css แล้วนำไปวางใน stylesheet ของโปรเจกต์คุณได้เลย
คุณสมบัติหลัก
- ขยาย Tailwind utility กลุ่มที่ใช้บ่อยเป็น CSS ธรรมดาพร้อมค่า design token เริ่มต้นที่แม่นยำ
- จัดการ variant hover, focus, active, disabled, group-hover, first/last และ odd/even
- แปลง responsive prefix sm ถึง 2xl เป็น min-width media query ที่จัดกลุ่มไว้อย่างถูกต้อง
- แปลง class dark mode เป็น prefers-color-scheme media query โดยอัตโนมัติ
- ชุดสี palette เริ่มต้นครบเฉด 50 ถึง 950 สำหรับ utility กลุ่ม text, background และ border
- คัดลอกไป clipboard หรือดาวน์โหลดไฟล์ .css พร้อมใช้ได้ทันที
คำถามที่พบบ่อย
Tailwind to CSS Converter ทำอะไร?
มันขยาย Tailwind CSS utility class strings ให้กลายเป็น CSS rules ธรรมดาที่เทียบเท่ากัน คุณวาง class อย่าง flex items-center p-4 bg-blue-500 แล้วได้ CSS declarations พร้อมใช้ โดยอิง design token เริ่มต้นของ Tailwind v3
รองรับ variant อะไรบ้าง?
รองรับ pseudo-class variant เช่น hover, focus, focus-visible, active, visited, disabled, first, last, odd, even และ group-hover ส่วน responsive prefix sm ถึง 2xl จะกลายเป็น min-width media query ที่จัดกลุ่มไว้ และ dark จะกลายเป็น prefers-color-scheme query
ครอบคลุม Tailwind utility ทุกตัวไหม?
ครอบคลุม utility ที่ใช้บ่อยที่สุด: layout, flexbox, grid, spacing, sizing, colors, typography, borders, radii, shadows, opacity, position, overflow, cursor, transition และ truncate ส่วน utility ที่อยู่นอก mapping นี้จะถูกแสดงว่ายังไม่รองรับ เพื่อไม่ให้อะไรหายไปเงียบๆ
markup ของฉันถูกอัปโหลดไปไหนหรือเปล่า?
ไม่ การแปลงเกิดขึ้นทั้งหมดในเบราว์เซอร์ของคุณด้วย JavaScript ไม่มีอะไรถูกส่งไป server ใดๆ จึงปลอดภัยสำหรับดีไซน์ที่เป็นความลับและโปรเจกต์ภายใน