จาก Angular 12 นั้น บอกว่าสามารถทำงานร่วมกับ Tailwind CSS 2.1.2 ง่ายขึ้น
นั่นคือ ไม่ต้องมา configuration อะไรมาก
จึงลองใช้งานนิดหน่อย ก็ง่ายจริง ๆ
มาดูว่า ทำอย่างไรกันบ้าง
ขั้นตอนที่ 1 สร้าง project ด้วย SCSS และติดตั้ง Tailwind
ขั้นตอนที่ 2 ทำการ initial config ของ Tailwind ใน project
จะสร้างไฟล์ tailwind.config.js
ขั้นตอนที่ 3 ทำการ import Tailwind ในไฟล์ styles.scss
ขั้นตอนที่ 4 ลองใช้งาน Tailwind ใน component
ไป copy มาจาก web Tailwind เลย
แสดงผลการทำงานดังนี้
เป็นอีกเรียบร้อย สำหรับการใช้งาน Tailwind CSS ใน Angular 12
ลอง Enable JIT mode ของ Tailwind CSS พบว่า มันแจ่มมาก
ขนาดของ CSS ลดลงไปจาก 2.78 MB เหลือ 2.8 KB
