Tailwind cho phép bạn áp dụng có điều kiện các lớp tiện ích ở các trạng thái khác nhau bằng cách sử dụng các công cụ sửa đổi biến thể. Ví dụ: sử dụng
01
02
03
04
05
06
01
02
03
04
05
06
Để biết danh sách đầy đủ tất cả các công cụ sửa đổi trạng thái có sẵn, hãy xem tài liệu về Hover, Focus và Other States
Bạn cũng có thể sử dụng các công cụ sửa đổi biến thể để nhắm mục tiêu các truy vấn phương tiện như điểm ngắt phản hồi, chế độ tối, chuyển động giảm ưu tiên, v.v. Ví dụ: sử dụng
01
02
03
04
05
06
01
02
03
04
05
06
Để tìm hiểu thêm, hãy xem tài liệu về Thiết kế đáp ứng, Chế độ tối và các công cụ sửa đổi truy vấn phương tiện khác
Sử dụng các giá trị tùy chỉnh
Tùy chỉnh chủ đề của bạn
Theo mặc định, thang khoảng cách của Tailwind sử dụng thang khoảng cách mặc định. Bạn có thể tùy chỉnh tỷ lệ giãn cách của mình bằng cách chỉnh sửa
01
02
03
04
05
06
01
02
03
04
05
06
01
02
03
04
05
06
module.exports = {
theme: {
extend: {
spacing: {
'11': '2.75rem',
}
}
}
}
Ngoài ra, bạn chỉ có thể tùy chỉnh thang đo chênh lệch bằng cách chỉnh sửa
01
02
03
04
05
06
01
02
03
04
05
06
01
02
03
04
05
06
module.exports = {
theme: {
extend: {
gap: {
'11': '2.75rem',
}
}
}
}
Tìm hiểu thêm về cách tùy chỉnh chủ đề mặc định trong tài liệu tùy chỉnh chủ đề
Giá trị tùy ý
Nếu bạn cần sử dụng giá trị
01
02
03
04
05
06
CSS Flexbox và CSS Grid là những công cụ tuyệt vời có sẵn để quản lý bố cục trên Web. Flexbox xử lý bố cục một chiều rất tốt, trong khi CSS Grid xử lý bố cục hai chiều với các cột và hàng. Thông thường, chúng tôi muốn thêm khoảng cách giữa các mục trong bố cục của mình. Bài đăng này sẽ cho biết cách thêm khoảng trắng giữa các mục flex bằng thuộc tính CSS
01
02
03
04
05
06
Inline Flex
Để minh họa CSS Gap, chúng tôi sẽ sử dụng Flexbox. CSS Gap hoạt động trong CSS Grid, nhưng có nhiều trường hợp chúng ta có các danh sách nội tuyến cần khoảng trống mà không có lưới xác định
1
2
3
4
5
6
01
02
03
04
05
06
Chúng tôi sử dụng
01
02
03
04
05
06
01
02
03
04
05
06
Nếu chúng tôi muốn thêm khoảng cách giữa mỗi mục, chúng tôi có thể sử dụng lề trên từng mục
01
02
03
04
05
06
Lề hoạt động nhưng không hoạt động giống như không gian CSS Gap. Chú ý không gian thêm xung quanh các hộp. Với khoảng cách khoảng cách, chúng tôi chỉ muốn khoảng cách được áp dụng giữa các mục. Sử dụng CSS Gap, chúng ta có thể đạt được điều này.
01
02
03
04
05
06
Khoảng cách CSS là một tính năng của CSS Grid spec và Flexbox. Hiện tại Firefox là trình duyệt chính duy nhất hỗ trợ
01
02
03
04
05
06
Để hỗ trợ các trình duyệt cũ hơn không hỗ trợ Flex Gap trong Flexbox, chúng tôi có thể sử dụng hack lề để tạo ra một giải pháp thay thế chặt chẽ
01
02
03
04
05
06
Chúng tôi có thể đặt không gian lề ở trên cùng và bên trái của mỗi mục. Trên phần tử cha flex, chúng tôi sử dụng lề âm để chống lại phần dư thừa trên các phần tử con bên ngoài. Kỹ thuật này sẽ có hiệu ứng tương tự như không gian CSS
01
02
03
04
05
06
Chúng tôi có thể dọn dẹp CSS một chút bằng cách sử dụng Thuộc tính tùy chỉnh CSS, do đó việc thay đổi khoảng cách lề sẽ dễ dàng hơn
01
02
03
04
05
06
Với giải pháp thay thế này, chúng tôi có thể nhận được thứ gì đó gần với không gian CSS Gap trong các trình duyệt cũ hơn. Với khoảng cách CSS Gap, chúng ta có thể loại bỏ phần lớn độ phức tạp của khoảng trắng trong CSS khi sử dụng lề. Kiểm tra bản demo hoạt động đầy đủ bên dưới