Bài 9: Pseudo-class (hover, focus, active…) trong Tailwind

Bạn đã từng rê chuột vào nút bấm và thấy nó đổi màu? Hoặc khi nhấp vào ô nhập liệu, viền ô sáng lên để báo hiệu trạng thái đang được chọn? Những điều tưởng chừng nhỏ nhặt này lại là yếu tố quan trọng giúp giao diện web trở nên trực quan và có phản hồi.

Trong bài học này, chúng ta sẽ khám phá cách Tailwind CSS xử lý các trạng thái người dùng như hover, focus, active… mà không cần viết JavaScript hay thêm CSS phức tạp. Bạn chỉ cần đặt các class đúng chỗ, và giao diện của bạn sẽ trở nên linh hoạt hơn ngay tức thì.

---

Trạng thái tương tác là gì?

Trước tiên, hãy nhớ lại một số trạng thái quen thuộc trong CSS truyền thống:

Trạng thái	Kích hoạt khi…
:hover	Người dùng rê chuột vào phần tử
:focus	Phần tử đang được chọn (đang gõ vào input, v.v.)
:active	Người dùng đang nhấn giữ chuột hoặc bàn phím

Trong Tailwind, bạn có thể sử dụng chúng bằng cách đặt trạng thái làm tiền tố (prefix) cho bất kỳ class nào.

---

Cách dùng cú pháp trạng thái

Cú pháp:

📋 Copy[state]:[class]

Ví dụ:

📋 Copy<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded">
  Gửi
</button>

Ở đây:

• bg-blue-500: màu nền mặc định
• hover:bg-blue-600: đổi màu nền khi rê chuột vào

---

Ví dụ thực tế: Thẻ input có trạng thái focus

📋 Copy<input
  type="text"
  class="border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 rounded px-3 py-2 w-full"
/>

Giải thích:

• border-gray-300: viền bình thường
• focus:border-blue-500: viền xanh khi được focus
• focus:ring focus:ring-blue-200: hiệu ứng sáng mờ quanh viền
• rounded, px, py: định dạng cơ bản

Bạn hãy thử nhấp vào ô này trong trình duyệt và cảm nhận hiệu ứng focus — rất trực quan và dễ dùng đúng không?

---

Các trạng thái phổ biến trong Tailwind

Trạng thái	Mô tả	Ví dụ
hover:	Khi rê chuột vào	hover:bg-red-600
focus:	Khi phần tử được focus (input, v.v.)	focus:ring-2
active:	Khi đang nhấn	active:scale-95
disabled:	Khi bị vô hiệu hóa	disabled:opacity-50
checked:	Checkbox đã chọn	checked:bg-blue-500
group-hover:	Hover cha thì con phản ứng	(sẽ học sau trong phần nâng cao)

---

Kết hợp nhiều trạng thái

Bạn có thể kết hợp nhiều trạng thái trong cùng một phần tử:

📋 Copy<button
  class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 active:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-300"
>
  Thực hiện
</button>

• hover:bg-green-600: đổi màu khi hover
• active:bg-green-700: đậm hơn khi đang nhấn
• focus:ring-2 focus:ring-green-300: viền sáng khi focus
• focus:outline-none: loại bỏ viền mặc định

---

Một ví dụ nhỏ có đầy đủ tương tác

📋 Copy<div class="p-6 max-w-sm mx-auto bg-white rounded shadow">
  <label class="block text-gray-700 mb-2">Email:</label>
  <input
    type="email"
    class="w-full border border-gray-300 rounded px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-500"
  />
  <button
    class="mt-4 w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 active:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300"
  >
    Đăng ký
  </button>
</div>

Bạn có thể copy đoạn code này vào một file HTML và thử tương tác. Từ ô nhập liệu đến nút bấm, tất cả đều phản hồi lại khi bạn rê chuột, bấm vào, hoặc focus — giúp giao diện “sống” hơn rất nhiều.

---

Tổng kết kiến thức

Tiền tố trạng thái	Dùng cho…	Gợi ý sử dụng
hover:	Hover chuột	hover:bg-*, hover:text-*
focus:	Đang chọn (input, button, link…)	focus:ring-*, focus:border-*
active:	Nhấn giữ	active:bg-*, active:scale-*
disabled:	Khi bị vô hiệu hóa	disabled:opacity-50

---

Tóm tắt bài học

• Tailwind cho phép bạn xử lý các trạng thái tương tác như hover, focus, active bằng cách thêm tiền tố trước class.
• Việc thêm hiệu ứng phản hồi sẽ giúp giao diện sinh động, dễ dùng và mang tính hiện đại.
• Các class như focus:ring, hover:bg-* hay active:scale-95 sẽ trở thành công cụ rất hữu ích trong quá trình xây dựng giao diện tương tác.