Blog này sẽ cung cấp ý tưởng về việc phân bổ không gian bằng nhau giữa nhiều thành phần trong Tailwind.
Làm cách nào để chỉ định không gian bằng nhau giữa nhiều phần tử trong Tailwind?
Người dùng có thể chỉ định khoảng cách bằng nhau giữa các phần tử bằng cách sử dụng “ dấu cách-{x/y}-{size} “lớp tiện ích. Người dùng có thể thêm khoảng trắng trên trục x hoặc y bằng cách chỉ định một giá trị nguyên. Tiện ích giãn cách là cần thiết vì nó làm cho trang web trở nên hấp dẫn. Nếu một trang web không có khoảng cách hợp lý giữa các phần tử thì nó sẽ không thu hút được người dùng.
Hãy lấy một ví dụ về mã để gán không gian bằng nhau giữa các thành phần lưới.
Cách 1: Gán Space trên trục X.
Khoảng cách bằng nhau được gán trên trục x tạo khoảng cách bằng nhau ở bên phải và bên trái của phần tử. Để gán khoảng trắng trên trục x, hãy sử dụng cú pháp sau:
không gian - x - { kích cỡ }
Kích thước có thể là bất kỳ giá trị số nguyên nào.
Hãy xem xét đoạn mã bên dưới để gán không gian bằng nhau trên trục x:
< thân hình >< div lớp học = 'mx-4 lưới lưới-cols-4 dấu cách-x-4' >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 1 div >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 2 div >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 3 div >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 4 div >
div >
thân hình >
Trong mã này:
- “ mx-4 ” thêm lề 4 px trên trục x (phải và trái).
- Các ' lưới ”lớp tạo ra một lưới.
- Các ' lưới-cols-4 ” tạo 4 cột trong lưới.
- Các ' dấu cách-x-4 ” thêm khoảng cách 4px giữa các thành phần của lưới.
- “ bg-xanh-400 ” đặt màu nền thành màu xanh lá cây.
- “ h-16 ” đặt chiều cao thành 16px.
- Các ' làm tròn-lg ” làm cho góc tròn và bán kính đường viền lớn.
- Các ' đường viền-2 ” tạo đường viền 2px xung quanh phần tử.
- “ viền-xanh-800 ” làm cho đường viền có màu xanh đậm.
đầu ra
Xem trước kết quả được tạo bởi đoạn mã trên:
Có thể thấy khoảng cách 4px được gán giữa các phần tử.
Cách 2: Gán khoảng trống trên trục y.
Khoảng cách có thể được chỉ định trên trục y tương tự như phương pháp trên, bằng những thay đổi nhỏ trong đoạn mã trên. Nó chỉ định các khoảng trắng dọc theo trục y (trên và dưới). Cú pháp cho nó là:
Đoạn mã dưới đây có thể được triển khai để thêm khoảng trắng dọc theo trục y:
< thân hình >< div lớp học = 'mx-4 my-4 space-y-4' >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 1 div >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 2 div >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 3 div >
< div lớp học = 'bg-green-400 h-16 round-lg border-2 border-green-800' > 4 div >
div >
thân hình >
Trong mã này:
- “ mx-4 ” thêm lề 4px vào bên trái và bên phải của các phần tử để giúp đầu ra được tối ưu hóa hơn.
- “ của tôi-4 ” thêm lề 4px trên trục y (trên và dưới).
- “ không gian-y-4 ” thêm khoảng trống 4px trên trục y (trên và dưới).
đầu ra
Lưu đoạn mã trên và xem trước trang web do nó tạo để xem khoảng cách như sau:
Đó là tất cả về việc phân bổ không gian bằng nhau giữa các phần tử.
Phần kết luận
Để chỉ định không gian bằng nhau giữa nhiều thành phần trong Tailwind, người dùng có thể sử dụng nút “ dấu cách-{x/y}-{size} ” lớp tiện ích và chỉ định một giá trị số nguyên làm kích thước theo yêu cầu. Khoảng cách bằng nhau giữa các thành phần giúp kết quả đầu ra có khả năng mở rộng cao hơn và người xem tiếp tục tương tác với trang web. Bài đăng này đã cung cấp phương pháp gán không gian bằng nhau giữa nhiều thành phần trong Tailwind.