Bài 22: Trạng thái tương tác nâng cao – group-hover, focus-within và beyond

Ở bài trước, bạn đã học cách thêm hiệu ứng chuyển động: từ nút đổi màu khi hover đến một thẻ nảy tưng tưng để thu hút sự chú ý.
Nhưng điều gì xảy ra khi… bạn muốn một phần tử thay đổi dựa trên hành động của phần tử khác?

Ví dụ:

• Khi rê chuột vào một khối, dòng chữ bên trong đổi màu
• Khi focus vào input, cả khối viền ngoài đổi màu theo
• Khi checkbox được chọn, hiện thêm nội dung

Đó là lúc ta cần đến những “liên kết tinh thần” giữa các phần tử. Tailwind gọi chúng bằng những cái tên như group-hover, peer-checked, focus-within. Đọc thì có vẻ kỹ thuật, nhưng bạn sẽ thấy… chúng giống như những trò chơi logic rất vui.

Hôm nay, chúng ta cùng khám phá cách tạo trạng thái tương tác phức tạp hơn – mà không viết JavaScript nào cả!

---

Làm quen với group-hover

Trong CSS truyền thống, bạn phải viết như sau:

📋 Copy.card:hover .title {
  color: red;
}

Với Tailwind, ta sẽ dùng group và group-hover.

Cách dùng rất đơn giản:

• Đặt group vào phần tử cha
• Dùng group-hover: ở phần tử con

Ví dụ:

📋 Copy<div class="group p-6 bg-gray-100 hover:bg-gray-200 rounded cursor-pointer">
  <h3 class="text-xl text-gray-800 group-hover:text-blue-600">
    Tiêu đề nổi bật khi rê chuột vào
  </h3>
</div>

Giải thích một cách hình ảnh: phần tử con lắng nghe hành động từ cha. Khi cha được hover, con lập tức “đổi thái độ”.

Bạn có thể áp dụng với nhiều kiểu hiệu ứng khác như scale, opacity, transform… Tuỳ bạn sáng tạo.

---

Focus-within – khi một thành phần bên trong được focus

Giả sử bạn có một ô input nằm trong một khối div. Bạn muốn khi người dùng click vào input, cả khối đó đổi màu viền. Đây là một trải nghiệm người dùng rất tinh tế – giúp người dùng biết “mình đang ở đâu”.

📋 Copy<div class="border border-gray-400 rounded p-4 focus-within:border-blue-500">
  <label class="block mb-1 text-gray-600">Email</label>
  <input type="email" class="w-full p-2 border rounded focus:outline-none" />
</div>

Khi bạn click vào input, viền của toàn bộ div đổi màu nhờ focus-within.
Cảm giác rất tự nhiên, đúng không? Như thể khối này đang “được kích hoạt”.

---

Peer và peer-checked – liên kết các phần tử cùng cấp

Tình huống tiếp theo: bạn có một checkbox, và muốn khi checkbox được chọn, nội dung mới sẽ xuất hiện, hoặc đổi màu.

Đây là lúc peer lên tiếng.
Bạn sẽ làm như sau:

• Gán peer vào checkbox
• Dùng peer-checked: ở phần tử kế tiếp

📋 Copy<div>
  <input type="checkbox" id="showMore" class="peer hidden" />
  <label for="showMore" class="inline-block bg-blue-500 text-white px-4 py-2 rounded cursor-pointer">
    Hiện thêm
  </label>

  <div class="mt-4 hidden peer-checked:block bg-gray-100 p-4 rounded">
    Đây là nội dung ẩn, giờ đã hiện ra!
  </div>
</div>

Khi checkbox được chọn, khối nội dung lập tức xuất hiện nhờ peer-checked:block.

Điều thú vị là bạn có thể làm hiệu ứng này hoàn toàn bằng HTML và Tailwind, không cần dùng JavaScript.

---

Kết hợp nhiều trạng thái cùng lúc

Bạn cũng có thể kết hợp:

• hover:scale-105 group-hover:rotate-6
• focus:outline-none focus:ring-2 focus:ring-blue-500
• peer-hover:bg-red-200 peer-checked:bg-green-300

Miễn là bạn biết logic tương tác nào đang xảy ra giữa các phần tử.

---

So sánh với CSS truyền thống

Tác vụ	CSS thuần	Tailwind CSS
Hover vào cha, đổi màu con	.card:hover .child { color: }	group group-hover:text-color
Khi input được focus	div:focus-within {}	focus-within:
Checkbox được chọn, hiện nội dung	input:checked ~ .box {}	peer peer-checked:block

---

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

Kỹ thuật	Class Tailwind tương ứng
Hover vào cha	group + group-hover:*
Focus vào phần tử con	focus-within:*
Checkbox được chọn	peer + peer-checked:*
Kết hợp trạng thái	hover:, focus:, peer-hover:, v.v.

---

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

• Tailwind không chỉ giúp bạn thiết kế đẹp – nó còn giúp bạn xây dựng giao diện biết “lắng nghe” người dùng.
• Các trạng thái nâng cao như group-hover, focus-within, peer-checked làm tăng tính tương tác mà vẫn giữ HTML sạch sẽ, dễ đọc.
• Điều quan trọng là hiểu logic quan hệ giữa các phần tử: ai lắng nghe ai, ai tác động đến ai.

---

Bài tiếp theo

Bây giờ bạn đã nắm được cách làm giao diện trở nên linh hoạt theo hành vi người dùng. Nhưng còn một điều nữa rất đặc biệt trong Tailwind: dark mode – tức là chế độ giao diện tối.

Trong bài 23 sắp tới, bạn sẽ học:

• Cách bật dark mode trong Tailwind
• Tạo thiết kế đổi màu theo chế độ sáng/tối
• Cách kiểm tra trên trình duyệt và áp dụng thực tế

Một chủ đề rất thú vị, vừa hợp xu hướng, vừa hữu dụng trong thực tế.

---

Hẹn gặp lại bạn trong bài 23: Dark mode trong Tailwind – thiết kế giao diện sáng tối chuyên nghiệp.