Tailwind CSS v4 — สิ่งที่เปลี่ยนไปและสิ่งที่ต้องรู้

v4 เปลี่ยนอะไร

• ไม่มี tailwind.config.js — config ย้ายมาอยู่ใน CSS ด้วย @theme
• CSS-first configuration — customization ทุกอย่างทำใน CSS
• เร็วขึ้น 5-10× — rewritten ด้วย Rust-based engine (Oxide)
• ไม่ต้อง @tailwind directives — แค่ import CSS file เดียว

การตั้งค่า v4

/* src/styles/global.css */
@import "tailwindcss";

@theme {
  --color-brand: #00d4ff;
  --color-brand-dark: #0099bb;
  --font-sans: 'Inter', sans-serif;
  --spacing-18: 4.5rem;
}

Custom utilities

@utility card {
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
}

ใช้ใน HTML: <div class="card">

Dark mode

@variant dark (&:where([data-theme="dark"] *));

แล้วใช้ dark: prefix ได้เหมือนเดิม

Astro + Tailwind v4

npx astro add tailwind
# เลือก v4 ถ้ามีตัวเลือก

---
// Layout.astro
import '../styles/global.css';
---

สิ่งที่ยังเหมือนเดิม

• Utility class names ส่วนใหญ่เหมือน v3 (flex, grid, text-sm ฯลฯ)
• Responsive prefixes (sm:, md:, lg:)
• Hover/focus variants (hover:, focus:)
• Arbitrary values (w-[237px], text-[#ff0000])