Styling Track
CSS
Tailwind Essentials
Tailwind states & responsive
เรียนรู้ variant prefixes เช่น hover:, focus:, md: และ lg: เพื่อเปลี่ยน style ตาม state และขนาดหน้าจอด้วย Tailwind v4
variant คือ prefix ที่บอกเงื่อนไข
variant ใน Tailwind คือ prefix หน้า utility class เช่น hover:bg-sky-700 หมายถึงใช้ bg-sky-700 เมื่อ hover เท่านั้น แนวคิดนี้ใช้กับ state และ responsive ได้เหมือนกัน เช่น focus:ring-2, md:grid-cols-2, lg:px-8 และสามารถซ้อนกันได้ เช่น md:hover:bg-slate-100
HTML
class ปกติคือค่าเริ่มต้น ส่วน class ที่มี prefix จะทำงานเมื่อเงื่อนไขนั้นเป็นจริง
<button class="bg-sky-600 hover:bg-sky-700 focus:ring-2 focus:ring-sky-300">
Save
</button>
<section class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
...
</section>