---

🌟 Tailwind Cheat Sheet (Cơ bản + hay dùng nhất)

🎨 Màu sắc

• Nền (Background): bg-blue-500, bg-gray-100, bg-red-600
• Chữ (Text): text-white, text-black, text-gray-700, text-blue-600
• Border: border, border-gray-300, border-red-500

---

📏 Khoảng cách

• Padding:

  • p-4 (tất cả)
  • px-4 (left + right)
  • py-2 (top + bottom)

• Margin:

  • m-2 (tất cả)
  • mt-4 (margin-top)
  • ml-auto (đẩy sang phải)

---

📐 Kích thước

• w-full, h-screen
• w-1/2, w-64
• max-w-lg, min-h-screen

---

🧑‍🤝‍🧑 Flex & Grid

• Flex:

  • flex, flex-col, flex-row
  • justify-center, justify-between, justify-end
  • items-center, items-start, items-end

• Grid:

  • grid grid-cols-2, grid-cols-3, grid-cols-12
  • gap-4 (khoảng cách)

---

✍️ Typography

• text-sm, text-base, text-lg, text-xl, text-2xl
• font-light, font-normal, font-bold
• italic, underline, line-through, uppercase, capitalize

---

🖼️ Layout

• container mx-auto (canh giữa)
• hidden md:block (ẩn mobile, hiện desktop)
• fixed, absolute, relative
• z-10, z-50

---

🎭 Hiệu ứng & Giao diện

• Hover/Focus:

  • hover:bg-blue-700
  • hover:underline

• Bo góc (Border Radius):

  • rounded, rounded-lg, rounded-full

• Shadow:

  • shadow, shadow-lg, shadow-xl

• Transition:

  • transition, duration-300, ease-in-out

---

📦 Ví dụ nhanh

<button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 shadow">
  Click me
</button>

👉 Kết quả: nút xanh, chữ trắng, bo góc, có bóng, hover đổi màu.

---

✅ Với cheat sheet này, bạn chỉ cần nhớ pattern chính:

• bg-* = màu nền
• text-* = màu chữ
• p-*/m-* = khoảng cách
• flex/grid = layout
• hover:* = hiệu ứng

---