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