📱 Tailwind CSS: Thiết Kế Responsive với Breakpoints

Dưới đây là phần tiếp theo trong chuỗi bài học Tailwind CSS cho Front-End Developer, tập trung vào chủ đề cực kỳ quan trọng: Responsive Design với Breakpoints – giúp giao diện tự động thích ứng trên mọi thiết bị.

NỘI DUNG

✨ Giới thiệu

Trong thời đại người dùng sử dụng điện thoại di động là chủ yếu, việc thiết kế website responsive – hiển thị tốt trên mọi kích thước màn hình là điều bắt buộc. Tailwind CSS giúp bạn:

✅ Thiết kế responsive mà không cần media query thủ công
✅ Sử dụng hệ thống breakpoints ngắn gọn & dễ nhớ
✅ Điều chỉnh layout, typography, spacing,… theo từng thiết bị

🔹 Cách sử dụng Breakpoints trong Tailwind

Tailwind sử dụng prefix breakpoint để áp dụng class CSS từ một kích thước màn hình cụ thể trở lên.

🧩 Cú pháp:

sm:bg-red-500

Có nghĩa là: khi màn hình ≥ sm, áp dụng background-color: red

📐 Các breakpoint mặc định:

Tên	Kích thước (min-width)	Mô tả
`sm`	640px	Điện thoại ngang
`md`	768px	Máy tính bảng
`lg`	1024px	Laptop nhỏ
`xl`	1280px	Desktop
`2xl`	1536px	Màn rất lớn

🔸 Ví dụ cơ bản: Thay đổi kích thước chữ theo thiết bị

htmlSao chépChỉnh sửa<h1 class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-4xl">
  Tiêu đề responsive
</h1>

👉 Trên điện thoại nhỏ: chữ nhỏ
👉 Trên màn lớn: chữ to dần theo breakpoint

🔸 Ví dụ bố cục Grid responsive

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-white p-4 shadow rounded">Thẻ 1</div>
  <div class="bg-white p-4 shadow rounded">Thẻ 2</div>
  <div class="bg-white p-4 shadow rounded">Thẻ 3</div>
</div>

✅ Mô tả:

Trên màn nhỏ: 1 cột
Màn vừa: 2 cột
Màn lớn: 3 cột

🔸 Responsive với Flex

<div class="flex flex-col md:flex-row">
  <div class="w-full md:w-1/3 bg-gray-100 p-4">Sidebar</div>
  <div class="w-full md:w-2/3 bg-white p-4">Nội dung chính</div>
</div>

Màn nhỏ: xếp dọc
Màn lớn: chuyển sang xếp ngang

🔸 Ẩn/hiện thành phần theo thiết bị

<p class="block md:hidden">Hiện trên điện thoại</p>
<p class="hidden md:block">Hiện trên máy tính</p>

📦 Tuỳ chỉnh breakpoint nâng cao (nếu cần)

Bạn có thể tùy chỉnh breakpoints trong tailwind.config.js:

theme: {
  screens: {
    sm: '480px',
    md: '768px',
    lg: '1024px',
    xl: '1280px',
    '2xl': '1536px',
  },
}

💡 Kết hợp với transition & hover

<button class="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded transition">
  Nhấn vào tôi
</button>

✅ Kết luận

Responsive không còn là “tùy chọn” – nó là tiêu chuẩn. Với Tailwind CSS, bạn không cần viết hàng tá @media thủ công nữa. Chỉ cần thêm prefix như sm:, md:, lg: là giao diện tự động thích ứng với mọi thiết bị.

HTML, CSS