Cách xử lý các trạng thái phức tạp (hover, focus, active, disabled) cho các component có tính tùy biến cao?

Question

Accepted Answer

Sử dụng các modifier của Tailwind là cách tiếp cận chuẩn:

Sử dụng group và peer: Đây là hai công cụ mạnh mẽ để xử lý trạng thái dựa trên phần tử cha hoặc phần tử anh em.
group-hover: Áp dụng style cho phần tử con khi phần tử cha được hover.
peer-checked: Áp dụng style cho phần tử anh em khi input (checkbox/radio) được chọn.
Kết hợp với arbitrary variants: Sử dụng cú pháp [&:nth-child(2)]:hover:bg-blue-500 để xử lý các trạng thái phức tạp mà các modifier mặc định không hỗ trợ.

Cách xử lý các trạng thái phức tạp (hover, focus, active, disabled) cho các component có tính tùy biến cao?

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi Tailwind CSS liên quan cùng chủ đề

Cách xử lý các trạng thái phức tạp (hover, focus, active, disabled) cho các component có tính tùy biến cao?

Đăng nhập để xem câu trả lời

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi Tailwind CSS liên quan cùng chủ đề