HTML, CSS

🧱 Thêm Layout Cơ Bản: Header – Content – Footer Với Tailwind CSS

Posted on by Đỗ Thành
26
Th6
View: 24

Dưới đây là phần tiếp theo trong chuỗi chuyên sâu về Tailwind CSS, tập trung vào việc xây dựng layout cơ bản bao gồm: Header – Content – Footer với giao diện chuẩn responsive, đẹp, dễ mở rộng trong dự án thực tế.

🧱 Thêm Layout Cơ Bản: Header – Content – Footer Với Tailwind CSS

Tác giả: Chuyên gia lập trình Front-End
Chuyên mục: Thiết kế layout với Tailwind CSS

✨ Giới thiệu

Một giao diện web tiêu chuẩn luôn cần một layout cơ bản, bao gồm:

  • Header: thanh điều hướng, logo, menu
  • Content: khu vực hiển thị nội dung chính
  • Footer: thông tin bản quyền, liên hệ, mạng xã hội

Với Tailwind CSS, bạn có thể xây dựng layout này mà không cần viết CSS thủ công, chỉ dùng class utility, vừa nhanh vừa dễ bảo trì.

⚙️ Cấu trúc tổng thể

<body class="flex flex-col min-h-screen">
  <!-- Header -->
  <header class="bg-white shadow p-4">
    <!-- Nội dung Header -->
  </header>

  <!-- Content chính -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- Nội dung chính -->
  </main>

  <!-- Footer -->
  <footer class="bg-gray-100 text-center text-sm text-gray-500 p-4">
    <!-- Nội dung Footer -->
  </footer>
</body>

🔹 1. Header – Thanh điều hướng (Navigation bar)

<header class="bg-white shadow p-4">
  <div class="container mx-auto flex justify-between items-center">
    <h1 class="text-xl font-bold text-blue-600">🌐 MySite</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-gray-700 hover:text-blue-600">Trang chủ</a></li>
        <li><a href="#" class="text-gray-700 hover:text-blue-600">Sản phẩm</a></li>
        <li><a href="#" class="text-gray-700 hover:text-blue-600">Liên hệ</a></li>
      </ul>
    </nav>
  </div>
</header>

✅ Sử dụng:

  • flex justify-between: chia thành hai phần trái – phải
  • space-x-4: tạo khoảng cách giữa các mục menu
  • hover:text-blue-600: hiệu ứng hover chuyển màu

🔹 2. Content – Nội dung chính của trang

<main class="flex-grow container mx-auto px-4 py-8">
  <h2 class="text-3xl font-semibold mb-4">Chào mừng bạn đến với Tailwind CSS</h2>
  <p class="mb-6 text-gray-700 leading-relaxed">
    Đây là vùng hiển thị nội dung chính của trang. Bạn có thể thêm văn bản, hình ảnh, bảng, biểu mẫu, hoặc các thành phần UI tùy ý.
  </p>
  <a href="#" class="inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">
    Khám phá thêm
  </a>
</main>

✅ Dùng:

  • container mx-auto: căn giữa nội dung
  • px-4 py-8: padding hợp lý
  • leading-relaxed: tăng khoảng cách dòng dễ đọc

🔹 3. Footer – Phần chân trang

<footer class="bg-gray-100 text-center text-sm text-gray-500 p-4">
  © 2025 MySite. Thiết kế bởi <a href="#" class="text-blue-500 hover:underline">Bạn</a>
</footer>

✅ Dùng:

  • text-sm text-gray-500: nhỏ nhẹ, ít nổi bật
  • hover:underline: hiệu ứng hover tinh tế

📱 Responsive tích hợp sẵn

Nhờ Tailwind, layout trên đã:

  • Tự động responsive (container co giãn)
  • Tùy chỉnh dễ dàng với prefix như md:, lg:, xl:

Ví dụ mở rộng:

<h2 class="text-xl md:text-3xl">Tiêu đề lớn hơn ở màn hình lớn</h2>

🧠 Kết hợp min-h-screen và flex-grow để giữ Footer dưới đáy

Đây là kỹ thuật layout giúp Footer luôn nằm ở cuối trang, dù nội dung ngắn:

<body class="flex flex-col min-h-screen">
  ...
  <main class="flex-grow">...</main>
  <footer>...</footer>
</body>

📘 Tổng Kết

Với chỉ vài class, bạn đã có một layout chuẩn chỉnh, dễ bảo trì, có thể mở rộng thành:

  • Blog
  • Landing page
  • Dashboard
  • Portfolio

Đây là viên gạch nền móng trong mọi dự án front-end.

Đỗ Thành