Tailwind CSS v3 Tips ที่ใช้บ่อย

Tailwind CSS เปลี่ยนวิธีการเขียน CSS ไปอย่างสิ้นเชิงด้วยแนวคิด utility-first ที่ให้เราใส่ class ตรงๆ ใน HTML แทนการเขียน CSS แยก ทำให้ไม่ต้องคิดชื่อ class และลด context switching หนึ่งในฟีเจอร์ที่มีประโยชน์มากคือ group modifier ที่ทำให้ style child element ตาม state ของ parent ได้ เช่น group-hover:opacity-100 จะทำงานเมื่อ hover บน parent ที่มี class group ส่วน peer modifier ทำงานคล้ายกันแต่กับ sibling element การใช้ arbitrary values เช่น w-[327px] หรือ bg-[#1a1a1a] ทำให้ไม่ต้องออกนอก Tailwind เพื่อเขียน CSS custom เลย และ JIT (Just-In-Time) compiler ที่เปิดใช้โดย default ใน v3 ทำให้ generate เฉพาะ class ที่ใช้จริงเท่านั้น สำหรับ responsive design ใช้ prefix sm: md: lg: xl: 2xl: ตามลำดับ โดยทำงานแบบ mobile-first คือ class ที่ไม่มี prefix จะใช้กับทุกขนาด และ prefix จะ override เมื่อถึง breakpoint นั้นๆ การสร้าง dark mode ทำได้ง่ายโดยเพิ่ม darkMode: "class" ใน tailwind.config.js แล้วใช้ dark: prefix เช่น dark:bg-gray-900 จากนั้นเพิ่ม class dark ที่ html element เพื่อเปิด dark mode