Login

Tailwind: responsive, dark mode và tùy biến theme trong thực tế

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Phần thú vị nhất của Tailwind nằm ở cách nó xử lý giao diện đáp ứng và chế độ tối: chỉ bằng tiền tố, bạn nói rõ giao diện sẽ khác đi thế nào ở từng kích thước màn hình hay từng chế độ màu. Bài này tiếp nối phần cơ bản, giúp bạn làm trang đáp ứng và hỗ trợ chế độ tối đúng cách.

Responsive theo tư duy mobile-first

Tailwind có các tiền tố breakpoint như sm:, md:, lg:, xl:, 2xl:. Mặc định các mốc là 640, 768, 1024, 1280 và 1536 pixel (có thể tùy chỉnh). Điều quan trọng: tiền tố nghĩa là "từ kích thước này trở lên", tức class không có tiền tố áp dụng cho mọi kích thước, bắt đầu từ điện thoại.

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

Cách đọc: một cột trên điện thoại, hai cột từ 640 pixel, ba cột từ 1024 pixel. Một lỗi hay gặp là nghĩ sm: nghĩa là "chỉ trên màn hình nhỏ", trong khi thực tế nó là "từ mốc nhỏ trở lên". Muốn ẩn trên màn hình lớn, ta viết lg:hidden; muốn chỉ hiện trên màn hình lớn, ta viết hidden lg:block.

Ví dụ: thanh điều hướng đáp ứng

<header class='flex items-center justify-between px-4 py-3 md:px-8'>
  <a href='/' class='text-xl font-bold'>Logo</a>

  <nav class='hidden gap-6 md:flex'>
    <a href='/khoa-hoc'>Khóa học</a>
    <a href='/blog'>Blog</a>
  </nav>

  <button class='md:hidden' aria-label='Mở menu'>☰</button>
</header>

Trên điện thoại, menu ngang ẩn và hiện nút ba gạch; từ 768 pixel trở lên thì ngược lại. Phần JavaScript để mở menu là việc riêng, nhưng bộ khung đáp ứng đã xong chỉ với vài class.

Chế độ tối với tiền tố dark

Tiền tố dark: áp dụng class khi đang ở chế độ tối:

<body class='bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100'>
  <div class='rounded-lg border border-gray-200 p-4 dark:border-gray-700'>
    Nội dung
  </div>
</body>

Theo mặc định, dark: dựa vào cài đặt hệ điều hành của người dùng (prefers-color-scheme). Nếu bạn muốn có nút chuyển thủ công, Tailwind cho phép cấu hình để chế độ tối bật theo một class hoặc thuộc tính trên thẻ gốc, ví dụ thêm class dark vào html. Cách cấu hình chính xác thay đổi theo phiên bản, hãy xem tài liệu của phiên bản bạn dùng.

// bật tắt chế độ tối bằng JavaScript (khi đã cấu hình theo class)
const goc = document.documentElement;
document.querySelector('#doi-mau').addEventListener('click', () => {
  goc.classList.toggle('dark');
  try {
    localStorage.setItem('theme', goc.classList.contains('dark') ? 'dark' : 'light');
  } catch (e) {}
});

Tùy biến theme

Bạn hiếm khi muốn dùng đúng bảng màu mặc định. Tailwind cho phép mở rộng theme với màu thương hiệu, phông chữ, khoảng cách, breakpoint riêng. Nơi cấu hình khác nhau theo phiên bản: bản cũ dùng file tailwind.config.js, bản mới hướng tới khai báo ngay trong CSS. Về ý tưởng, bạn mô tả như sau:

// ví dụ khái niệm với tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        thuonghieu: {
          500: '#2563eb',
          600: '#1d4ed8',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
};

Sau đó bạn dùng bg-thuonghieu-500 hay text-thuonghieu-600 như mọi màu khác. Dùng extend để thêm vào mà không mất giá trị mặc định.

Mẹo tổ chức class khi giao diện phức tạp

  1. Đóng gói thành component để mỗi chuỗi class dài chỉ xuất hiện một lần.
  2. Sắp xếp class có trật tự (bố cục, khoảng cách, chữ, màu, trạng thái), hoặc dùng plugin Prettier của Tailwind để tự sắp xếp.
  3. Dùng biến thể có điều kiện bằng thư viện nhỏ như clsx để ghép class theo state.
  4. Kiểm tra độ tương phản màu ở cả chế độ sáng lẫn tối, để chữ vẫn đọc được.
  5. Thử trên thiết bị thật, không chỉ thu nhỏ cửa sổ trình duyệt.

Container và khoảng cách theo màn hình

Một mẫu thường dùng là giới hạn chiều rộng nội dung và tăng khoảng đệm khi màn hình lớn dần:

<main class='mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8'>
  <h1 class='text-2xl font-bold sm:text-3xl lg:text-4xl'>Tiêu đề trang</h1>
  <p class='mt-4 text-base text-gray-600 dark:text-gray-300'>Đoạn mô tả.</p>
</main>

Class mx-auto kết hợp max-w-5xl căn giữa nội dung trong giới hạn; cỡ chữ và khoảng đệm lớn lên theo từng mốc. Đây là mẫu bạn sẽ gặp trong hầu hết các trang dựng bằng Tailwind.

Kết luận

Nhớ ba điều: tiền tố breakpoint nghĩa là "từ mốc này trở lên", dark: thêm giao diện cho chế độ tối, và theme có thể mở rộng bằng màu, phông chữ của riêng bạn. Kết hợp với component, bạn có thể dựng giao diện đáp ứng chất lượng với rất ít CSS viết tay.

Nếu bạn muốn thực hành toàn bộ quy trình dựng một trang đáp ứng bằng Tailwind từ đầu, hãy xem các khóa học trên codebem.com.

author_photo
Nguyễn Đình Cường

0 comment