The Tailwind CSS class container được dùng để giới hạn chiều rộng nội dung. Nó cũng đảm bảo bố cục responsive và căn giữa.
- Centers Content: Tự động căn giữa nội dung theo chiều ngang trong khung nhìn (viewport).
- Responsive Widths: Đặt chiều rộng tối đa tại các breakpoint khác nhau cho thiết kế nhất quán.
- Prevents Overstretching: Giới hạn chiều rộng nội dung trên màn hình lớn để duy trì sự cân bằng.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="container mx-auto px-4">
<h1 class="text-2xl font-bold">Welcome to Tailwind CSS</h1>
<p class="mt-4">This is a simple example demonstrating the use of the container class in Tailwind CSS.</p>
</div>
</body>
</html>
- Class container thiết lập chiều rộng cố định responsive tại các breakpoint khác nhau. Điều này đảm bảo nội dung thích ứng với các kích thước màn hình.
- Class mx-auto căn giữa container theo chiều ngang bên trong viewport.
Breakpoints in Tailwind CSS
| Breakpoint | min-width |
|---|---|
| sm | 640px |
| md | 768px |
| lg | 1024px |
| xl | 1280px |
| 2xl | 1536px |
Tailwind CSS không tự động căn giữa và không có padding được xác định trước. Dưới đây là các utility class giúp container class nổi bật.
mx-auto Class
Để căn giữa container, ta sử dụng mx-auto utility class. Nó tự động điều chỉnh margin của container để nó xuất hiện ở giữa.
Syntax:
<element class="mx-auto">...</element>HTML
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
</head>
<body>
<div class="bg-green-500 text-white mx-auto p-4">
This is centered using the mx-auto class.
</div>
<div class="bg-blue-500 text-white mx-auto p-4 mt-4">
Another centered section with a different background color.
</div>
</body>
</html>
In this Example:
- Div đầu tiên minh họa cách mx-auto căn giữa nội dung theo chiều ngang.
- Div thứ hai thêm sự đa dạng, cho thấy cách mt-4 tạo khoảng cách giữa các phần tử.
px-{size} Class
Để thêm padding cho container, ta dùng px-{size} utility class. Nó thêm padding ngang vào container bằng với kích thước được chỉ định.
Syntax:
<element class="px-20">...</element>HTML
<html>
<head>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<h2 class="text-center text-green-500">GeeksforGeeks</h2>
<br />
<div class="bg-green-500 text-white mx-auto px-20">
This container has horizontal padding of 5rem (80px) on both sides.
</div>
</body>
</html>
- px-20 class áp dụng padding ngang 5rem (80px) cho cả hai bên container.
- mx-auto class căn giữa container theo chiều ngang bên trong phần tử cha.
Best Practices for Using Tailwind CSS Container
- Center Containers by Default: Cấu hình container để tự động căn giữa nội dung bằng cách đặt center: true. Điều này được thực hiện trong cấu hình Tailwind của bạn.
- Add Horizontal Padding: Đảm bảo khoảng cách nhất quán bằng cách chỉ định padding ngang mặc định. Bạn có thể đặt giá trị này trong cấu hình container ví dụ padding: '2rem'.
- Customize Breakpoint Widths: Xác định chiều rộng tối đa tùy chỉnh cho các breakpoint khác nhau. Điều này giúp đạt được bố cục mong muốn trên các kích thước màn hình.