Tương tự như cách Tailwind xử lý thiết kế đáp ứng, bạn có thể hoàn thành các yếu tố kiểu dáng khi di chuột, lấy tiêu điểm, v.v. bằng cách thêm tiền tố vào các tiện ích với biến thể trạng thái phù hợp
Sign up
Theo mặc định, không phải tất cả các biến thể trạng thái đều được bật cho tất cả các tiện ích do cân nhắc về kích thước tệp, nhưng chúng tôi đã cố gắng hết sức để bật các kết hợp được sử dụng phổ biến nhất ngay lập tức
Để biết danh sách đầy đủ các biến thể nào được bật theo mặc định, hãy xem ở cuối trang này
Nếu cần nhắm mục tiêu đến một trạng thái mà Tailwind không hỗ trợ, thì bạn có thể mở rộng các biến thể được hỗ trợ bằng cách
Thêm tiền tố
Hover me
7 để chỉ áp dụng tiện ích khi di chuột
Hover me
Theo mặc định, biến thể
Hover me
8 được bật cho các plugin cốt lõi sau
9Hover me
0
1
2
3
4
5
6
7
8
9
0Click me
1Click me
2Click me
Bạn có thể kiểm soát xem các biến thể
Hover me
8 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnThêm tiền tố
Click me
6 để chỉ áp dụng tiện ích tập trung
Theo mặc định, biến thể
Click me
7 được bật cho các plugin cốt lõi sau
8Click me
9Hover me
0
1
2
3
4
5
6New Project
Create a new project from a variety of starting templates.
7New Project
Create a new project from a variety of starting templates.
8New Project
Create a new project from a variety of starting templates.
9New Project
Create a new project from a variety of starting templates.
0Bookmark
1Bookmark
2Bookmark
3Bookmark
6
7
8
9
0Click me
1Click me
2Click me
1
Bạn có thể kiểm soát việc có bật biến thể
Click me
7 cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnTích cực
Thêm tiền tố
5 để chỉ áp dụng tiện ích khi một phần tử đang hoạt động
Click me
Theo mặc định, biến thể
6 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
6 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnDi chuột theo nhóm
Nếu bạn cần tạo kiểu cho phần tử con khi di chuột qua phần tử cha cụ thể, hãy thêm lớp
Ring on focus
Ring on focus-visible
0 vào phần tử cha và thêm tiền tố
Ring on focus
Ring on focus-visible
1 vào tiện ích trên phần tử conDự án mới
Tạo một dự án mới từ nhiều mẫu bắt đầu
New Project
Create a new project from a variety of starting templates.
Theo mặc định, biến thể
Ring on focus
Ring on focus-visible
2 được bật cho các plugin cốt lõi sau
9Hover me
0
1
2
3
5
9
0Click me
1Click me
Bạn có thể kiểm soát việc có bật biến thể
Ring on focus
Ring on focus-visible
2 cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnTập trung vào nhóm
Biến thể
Hover me
5 hoạt động giống như ngoại trừ tiêu điểm
Bookmark
Theo mặc định, biến thể
Hover me
5 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
Hover me
5 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnTập trung vào bên trong
Thêm tiền tố
Hover me
1 để chỉ áp dụng tiện ích khi phần tử con có tiêu điểm
Theo mặc định, biến thể
Hover me
2 được bật cho các plugin cốt lõi sau
8Click me
9Hover me
0
1
2
3
5
6New Project
Create a new project from a variety of starting templates.
9New Project
Create a new project from a variety of starting templates.
0Bookmark
1Bookmark
2Bookmark
3Bookmark
9
0Click me
1Click me
1
Bạn có thể kiểm soát xem các biến thể
Hover me
2 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạntiêu cự có thể nhìn thấy
Lưu ý rằng tiêu điểm có thể nhìn thấy hiện yêu cầu các polyfill JS và PostCSS để hỗ trợ đầy đủ cho trình duyệt
Thêm tiền tố
Hover me
13 để chỉ áp dụng tiện ích khi một phần tử có tiêu điểm nhưng chỉ khi người dùng đang sử dụng bàn phímĐổ chuông khi lấy nét Đổ chuông khi lấy nét có thể nhìn thấy
Ring on focus
Ring on focus-visible
Lưu ý rằng hiện tại chỉ có Chrome, Edge và Firefox hỗ trợ
Hover me
14 nguyên bản, vì vậy, để được hỗ trợ đầy đủ cho trình duyệt, bạn nên cài đặt và định cấu hình cả polyfill JS có thể nhìn thấy tiêu điểm và polyfill PostCSS có thể nhìn thấy tiêu điểm. Đảm bảo bao gồm plugin PostCSS sau Tailwind trong danh sách plugin PostCSS của bạnTheo mặc định, biến thể
Hover me
14 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
Hover me
14 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnchuyển động an toàn
Thêm tiền tố
Hover me
19 để chỉ áp dụng một tiện ích khi tính năng phương tiện
Hover me
20 phù hợp với
Hover me
21Ví dụ: nút này sẽ chỉ hoạt hình khi di chuột nếu người dùng chưa bật "Giảm chuyển động" trên hệ thống của họ
Hover me
Lưu ý rằng không giống như hầu hết các biến thể khác, có thể kết hợp
Hover me
22 với cả biến thể đáp ứng và các biến thể khác như
Hover me
8, bằng cách xếp chúng theo thứ tự nàyTheo mặc định, biến thể
Hover me
22 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát việc có bật biến thể
Hover me
22 cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạngiảm chuyển động
Thêm tiền tố
Hover me
28 để chỉ áp dụng một tiện ích khi tính năng phương tiện
Hover me
20 phù hợp với
Hover me
30Ví dụ: nút này sẽ hoạt ảnh khi di chuột theo mặc định, nhưng hoạt ảnh sẽ bị tắt nếu người dùng đã bật "Giảm chuyển động" trên hệ thống của họ
Hover me
Lưu ý rằng không giống như hầu hết các biến thể khác, có thể kết hợp
Hover me
31 với cả biến thể đáp ứng và các biến thể khác như
Hover me
8, bằng cách xếp chúng theo thứ tự nàyTheo mặc định, biến thể
Hover me
31 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát việc có bật biến thể
Hover me
31 cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnTàn tật
Thêm tiền tố
Hover me
37 để chỉ áp dụng tiện ích khi một phần tử bị tắt
Hover me
0Theo mặc định, biến thể
Hover me
38 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát việc có bật biến thể
Hover me
38 cho plugin hay không trong phần
Click me
4 của tệp
Click me
5Đã truy cập
Thêm tiền tố
Hover me
42 để chỉ áp dụng tiện ích khi một liên kết đã được truy cập
Hover me
1Theo mặc định, biến thể
Hover me
43 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
Hover me
43 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnĐã kiểm tra
Thêm tiền tố
Hover me
47 để chỉ áp dụng tiện ích khi radio hoặc hộp kiểm hiện được chọn
Theo mặc định, biến thể
Hover me
48 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát việc có bật biến thể
Hover me
48 cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạncon đầu lòng
Thêm tiền tố
Hover me
52 để chỉ áp dụng tiện ích khi nó là con đầu lòng của cha mẹ nó. Điều này chủ yếu hữu ích khi các phần tử đang được tạo trong một số loại vòng lặp
Hover me
3Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích
Hover me
52 nào vào phần tử con, không phải phần tử chaTheo mặc định, biến thể
Hover me
54 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
Hover me
55 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnCon cuối cùng
Thêm tiền tố
Hover me
58 để chỉ áp dụng tiện ích khi nó là con cuối cùng của cha mẹ nó. Điều này chủ yếu hữu ích khi các phần tử đang được tạo trong một số loại vòng lặp
Hover me
4Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích
Hover me
58 nào vào phần tử con, không phải phần tử chaTheo mặc định, biến thể
Hover me
60 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
Hover me
61 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạncon lẻ
Thêm tiền tố
Hover me
64 để chỉ áp dụng tiện ích khi nó là con lẻ của cha mẹ nó. Điều này chủ yếu hữu ích khi các phần tử đang được tạo trong một số loại vòng lặp
Hover me
5Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích
Hover me
64 nào vào phần tử con, không phải phần tử chaTheo mặc định, biến thể
Hover me
66 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
Hover me
67 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạncon chẵn
Thêm tiền tố
Hover me
70 để chỉ áp dụng tiện ích khi nó là con chẵn của cha mẹ nó. Điều này chủ yếu hữu ích khi các phần tử đang được tạo trong một số loại vòng lặp
Hover me
6Điều quan trọng cần lưu ý là bạn nên thêm bất kỳ tiện ích
Hover me
70 nào vào phần tử con, không phải phần tử chaTheo mặc định, biến thể
Hover me
72 không được bật cho bất kỳ plugin cốt lõi nàoBạn có thể kiểm soát xem các biến thể
Hover me
73 có được bật cho plugin hay không trong phần
Click me
4 của tệp
Click me
5 của bạnKết hợp với tiền tố đáp ứng
Các biến thể trạng thái cũng phản hồi nhanh, nghĩa là bạn có thể thực hiện những việc như thay đổi kiểu di chuột của một phần tử tại các điểm ngắt khác nhau chẳng hạn
Để áp dụng một biến thể trạng thái tại một điểm dừng cụ thể, trước tiên hãy thêm tiền tố đáp ứng, trước tiền tố trạng thái
Tạo các biến thể cho các tiện ích tùy chỉnh
Bạn có thể tạo các biến thể trạng thái cho các lớp CSS tùy chỉnh của riêng mình bằng cách gói chúng bằng chỉ thị
Hover me
76Để biết thêm thông tin, hãy xem
Tạo các biến thể tùy chỉnh
Bạn có thể tạo các biến thể của riêng mình cho bất kỳ trạng thái nào mà Tailwind không hỗ trợ theo mặc định bằng cách viết plugin biến thể tùy chỉnh
Ví dụ: plugin đơn giản này thêm hỗ trợ cho biến thể lớp giả
Hover me
77Tìm hiểu thêm về cách viết các plugin biến thể trong
Tham chiếu biến thể mặc định
Do cân nhắc về kích thước tệp, Tailwind không bao gồm tất cả các biến thể cho tất cả các tiện ích theo mặc định
Để định cấu hình biến thể nào được bật cho dự án của bạn, hãy xem tài liệu cấu hình biến thể