🧱 Tạo Trang HTML Đầu Tiên Dùng Tailwind CSS: Bắt Đầu Dựng Giao Diện Thực Tế

Dưới đây là bài viết tiếp theo trong chuỗi chuyên đề Tailwind CSS cho lập trình viên front-end, hướng dẫn thực hành tạo một trang HTML đầu tiên sử dụng Tailwind CSS, đồng thời giải thích các thành phần cơ bản của layout hiện đại: header, nội dung, footer.

NỘI DUNG

✨ Giới thiệu

Bạn đã hiểu Utility-first CSS, biết cách cài đặt Tailwind, và tùy biến tailwind.config.js. Giờ là lúc hành động – tạo một trang HTML đầu tiên với layout cơ bản bao gồm: Header, Content, Footer.

Bài viết này sẽ hướng dẫn bạn:

Tạo file HTML tích hợp Tailwind CSS (qua CDN – nhanh gọn)
Hiểu cấu trúc layout hiện đại với Tailwind
Áp dụng các class phổ biến: padding, margin, text, màu, grid, flex…

⚙️ Bước 1: Tạo file HTML đơn giản với Tailwind CDN

Đây là cách nhanh nhất để bắt đầu khi bạn chưa dùng Vite/Webpack.

📁 Cấu trúc thư mục:

my-first-tailwind/
├── index.html

✍️ Nội dung index.html

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Trang đầu tiên với Tailwind CSS</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 text-gray-800 font-sans">

  <!-- Header -->
  <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-600 hover:text-blue-600">Trang chủ</a></li>
          <li><a href="#" class="text-gray-600 hover:text-blue-600">Giới thiệu</a></li>
          <li><a href="#" class="text-gray-600 hover:text-blue-600">Liên hệ</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Nội dung chính -->
  <main class="container mx-auto py-10 px-4">
    <h2 class="text-3xl font-semibold mb-6">Chào mừng đến với Tailwind CSS!</h2>
    <p class="mb-4">Đây là đoạn giới thiệu ngắn về trang web của bạn. Bạn có thể tùy biến màu sắc, font chữ, khoảng cách... một cách dễ dàng bằng các utility class.</p>
    <a href="#" class="inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 transition">Bắt đầu ngay</a>
  </main>

  <!-- Footer -->
  <footer class="bg-white border-t mt-10 p-4 text-center text-sm text-gray-500">
    © 2025 MySite. All rights reserved.
  </footer>

</body>
</html>

📌 Giải thích các class quan trọng

Class	Ý nghĩa
`bg-white`, `bg-gray-100`	Màu nền
`text-gray-800`, `text-blue-600`	Màu chữ
`font-bold`, `text-3xl`	Định dạng chữ
`p-4`, `py-10`, `px-4`	Padding
`container mx-auto`	Căn giữa layout
`flex`, `justify-between`, `items-center`	Bố cục Flexbox
`hover:text-blue-600`, `transition`	Hiệu ứng hover

🧪 Tùy biến nhanh

Bạn có thể chỉnh sửa theo ý thích, ví dụ:

Đổi text-blue-600 thành text-green-500
Thêm rounded-lg vào nút
Dùng grid thay vì flex trong header

🧠 Kết luận

Việc tạo một trang HTML cơ bản với Tailwind CSS cực kỳ nhanh gọn — bạn không cần viết bất kỳ dòng CSS nào, mà vẫn có layout hiện đại, responsive và đẹp mắt.

Đây chính là sức mạnh của utility-first CSS: thay vì viết CSS, bạn xây giao diện như lắp ghép LEGO, chỉ cần tập trung vào cấu trúc và logic hiển thị.

HTML, CSS