สนามทดลอง Tailwind

วิธีใช้ สนามทดลอง Tailwind

สนามทดลองนี้รันคอมไพเลอร์เบราว์เซอร์อย่างเป็นทางการของ Tailwind CSS v4 บนเครื่องคุณทั้งหมด คุณพิมพ์ HTML ธรรมดาที่ใส่คลาส utility ไว้ด้านซ้าย คอมไพเลอร์จะสร้าง CSS ที่ตรงกันใน iframe พรีวิวแบบแซนด์บ็อกซ์ และแผงด้านล่างจะแสดงสไตล์ชีตที่ถูกสร้างขึ้นแบบตรง ๆ ไม่มีการอัปโหลดใด ๆ: คอมไพเลอร์ มาร์กอัปของคุณ และฉบับร่างล้วนอยู่ในเบราว์เซอร์

1. เลือกจุดเริ่มจากตัวเลือก 「เทมเพลต」: Hero, กริดการ์ด, ตารางราคา หรือว่างเปล่า ข้อความของคุณยังถูกกู้คืนอัตโนมัติระหว่างการเข้าชมด้วย
2. แก้ไข HTML ในเอดิเตอร์ฝั่งซ้าย กด Tab จะเว้นวรรคสองช่อง และพรีวิวจะคอมไพล์ใหม่ประมาณ 500 ms หลังคุณหยุดพิมพ์
3. สลับ 「ตัดบรรทัดอัตโนมัติ」 เพื่อคุมการขึ้นบรรทัดใหม่ และใช้ตัวเลือก 「ขนาดฟอนต์」 กำหนดขนาดตัวอักษรในเอดิเตอร์
4. เปิด 「พรีวิวโหมดมืด」 เพื่อเพิ่มคลาส "dark" ให้เอกสารพรีวิว utility อย่าง dark:bg-slate-900 จะตอบสนองทันที
5. อ่านกฎที่สร้างขึ้นในแผง 「CSS ที่คอมไพล์แล้ว」 แล้วคัดลอกด้วย 「คัดลอก CSS」 เมื่อต้องการ
6. ใช้ 「คัดลอก HTML」 สำหรับมาร์กอัปดิบ หรือ 「ดาวน์โหลด HTML」 เพื่อได้ไฟล์สแตนด์อโลนที่ฝัง CSS คอมไพล์แล้ว เปิดออฟไลน์ได้เลย

ไฟล์ที่ดาวน์โหลดจะมีสไตล์จริงก็ต่อเมื่อคอมไพล์อย่างน้อยหนึ่งรอบแล้ว ก่อนส่งออกให้ปล่อยพรีวิวเรนเดอร์สักรอบ อยากให้ CSS ที่สร้างได้เล็กลง ให้ลบ element ที่ไม่ได้ใช้ออกจากเทมเพลต — แผงจะสะท้อนสิ่งที่มาร์กอัปปัจจุบันต้องใช้อย่างแม่นยำเสมอ