Responsive Design

Trong bài học này, học viên sẽ tìm hiểu cách sử dụng các breakpoints và responsive utilities trong Tailwind CSS để tạo ra giao diện linh hoạt, phản hồi tốt trên các kích thước màn hình khác nhau.

Responsive Design

1. Sử dụng Breakpoints trong Tailwind CSS

Tailwind cung cấp các breakpoints sau:

• sm: Màn hình nhỏ (min-width: 640px).
• md: Màn hình trung bình (min-width: 768px).
• lg: Màn hình lớn (min-width: 1024px).
• xl: Màn hình rất lớn (min-width: 1280px).
• 2xl: Màn hình siêu lớn (min-width: 1536px).

Cách sử dụng

• Đặt class có prefix theo breakpoint:

<div class="text-base md:text-lg lg:text-xl">Văn bản thay đổi kích thước theo màn hình</div>

• Ví dụ: Padding thay đổi theo kích thước màn hình:

<div class="p-4 md:p-8 lg:p-12">Nội dung có khoảng cách động</div>

2. Responsive Utilities cho Layout, Typography, và Khoảng Cách

• Layout: Sử dụng flexbox và grid responsive:

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-blue-200 p-4">Item 1</div>
    <div class="bg-green-200 p-4">Item 2</div>
    <div class="bg-red-200 p-4">Item 3</div>
  </div>
  

• Typography: Điều chỉnh cỡ chữ linh hoạt:

  <h1 class="text-lg md:text-2xl lg:text-4xl">Tiêu đề Responsive</h1>
  

• Khoảng cách:

  <div class="p-2 md:p-6 lg:p-10">Khoảng cách thay đổi theo kích thước màn hình</div>
  

3. Thực Hành Xây Dựng Giao Diện Responsive

Bài tập:

Xây dựng bố cục responsive đơn giản cho trang giới thiệu sản phẩm:

<div class="container mx-auto p-4">
  <header class="text-center mb-8">
    <h1 class="text-3xl md:text-5xl font-bold">Sản phẩm nổi bật</h1>
  </header>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-gray-100 p-6 rounded-md shadow-md">
      <h2 class="text-xl font-semibold">Sản phẩm 1</h2>
      <p class="text-gray-600">Mô tả chi tiết sản phẩm.</p>
    </div>
    <div class="bg-gray-100 p-6 rounded-md shadow-md">
      <h2 class="text-xl font-semibold">Sản phẩm 2</h2>
      <p class="text-gray-600">Mô tả chi tiết sản phẩm.</p>
    </div>
    <div class="bg-gray-100 p-6 rounded-md shadow-md">
      <h2 class="text-xl font-semibold">Sản phẩm 3</h2>
      <p class="text-gray-600">Mô tả chi tiết sản phẩm.</p>
    </div>
  </div>
</div>

Kết Luận

Học viên đã tìm hiểu cách sử dụng breakpoints và responsive utilities trong Tailwind CSS để tạo giao diện linh hoạt. Thực hành thường xuyên sẽ giúp bạn thiết kế giao diện phù hợp cho nhiều loại thiết bị.