📗 TÀI LIỆU TỰ HỌC TAILWIND CSS

Học đến đâu, làm đến đó. Một trải nghiệm học tương tác.

✅ Mục tiêu cuối cùng: Sau khóa học này, bạn sẽ tự thiết kế và triển khai một website hoàn chỉnh bằng Tailwind CSS.

🔰 Phần 1: Chuẩn bị & Cài đặt

Phần này giới thiệu các khái niệm cốt lõi của Tailwind CSS và hướng dẫn bạn cách thiết lập môi trường phát triển. Chúng ta sẽ bắt đầu bằng việc so sánh Tailwind với các phương pháp khác và kết thúc bằng việc tạo trang "Hello World" đầu tiên.

So sánh Tailwind, Bootstrap & CSS truyền thống

Tailwind CSS (Utility-First)

Cung cấp các lớp tiện ích nhỏ để xây dựng thiết kế trực tiếp trong HTML. Linh hoạt và tùy biến cao.

Bootstrap (Component-First)

Cung cấp các thành phần dựng sẵn (nút, card...). Nhanh chóng để tạo giao diện chuẩn.

CSS Truyền thống

Viết CSS từ đầu. Toàn quyền kiểm soát nhưng tốn thời gian và khó bảo trì hơn.

🎯 Bài tập: Hello Tailwind!

Hãy tạo trang HTML đầu tiên có dòng chữ “Hello Tailwind” được canh giữa và có nền xám.

Hello Tailwind

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200 min-h-screen flex items-center justify-center">
  <h1 class="text-3xl font-bold">Hello Tailwind</h1>
</body>
</html>

🎨 Phần 2: Thiết kế khung website

Trong phần này, chúng ta sẽ học cách sử dụng các utility class mạnh mẽ của Tailwind để xây dựng bố cục (layout) cho trang web. Bạn sẽ làm quen với Flexbox, Grid và các khái niệm responsive để tạo ra một khung website hoàn chỉnh.

🎯 Bài tập: Vẽ khung website

Vẽ khung website cơ bản có 3 phần: Header (chứa logo và menu), Nội dung chính, và Footer (chứa thông tin liên hệ).

Logo

Đây là nội dung chính của trang web.

<body class="flex flex-col min-h-screen bg-gray-100">
    <header class="bg-gray-800 text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <div class="text-xl font-bold">Logo</div>
            <nav>Menu</nav>
        </div>
    </header>
    <main class="flex-grow container mx-auto my-8 p-4 bg-white">
        <h1>Nội dung chính</h1>
    </main>
    <footer class="bg-gray-800 text-white p-4">
        <div class="container mx-auto text-center">
            <p>Thông tin liên hệ</p>
        </div>
    </footer>
</body>

🧱 Phần 3: Xây dựng từng phần của website

Giờ là lúc hiện thực hóa các ý tưởng. Trong phần này, chúng ta sẽ lần lượt xây dựng từng thành phần phổ biến của một trang web, từ Header, Banner cho đến Form liên hệ và Footer. Mỗi bài tập sẽ giúp bạn củng cố kỹ năng và thấy được sản phẩm của mình dần hoàn thiện.

3.1. 🎯 Thanh điều hướng (Navbar)

Xây dựng thanh điều hướng responsive, có thể ẩn/hiện menu trên thiết bị di động.

MyLogo

<header class="bg-gray-800 text-white">
    <div class="container mx-auto flex justify-between items-center p-4">
        <div class="text-2xl font-bold">MyLogo</div>
        <nav class="hidden md:block">
            <ul class="flex space-x-6">
                <li><a href="#" class="hover:text-indigo-400">Trang chủ</a></li>
                <!-- More items -->
            </ul>
        </nav>
        <div class="md:hidden">
            <button id="mobile-menu-button">Icon</button>
        </div>
    </div>
    <div id="mobile-menu" class="hidden md:hidden bg-gray-700">
        <!-- Mobile menu items -->
    </div>
</header>

<script>
  document.getElementById('mobile-menu-button').addEventListener('click', function() {
    document.getElementById('mobile-menu').classList.toggle('hidden');
  });
</script>

3.2. 🎯 Banner / Hero Section

Tạo một banner ấn tượng với tiêu đề lớn, mô tả và nút kêu gọi hành động (CTA).

Chào mừng đến với Website!

Khám phá các giải pháp công nghệ tiên tiến.

Xem thêm

<section class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-20 text-center">
    <h1 class="text-5xl font-extrabold">Chào mừng đến với Website!</h1>
    <p class="text-xl mt-4 mb-8">Khám phá các giải pháp công nghệ tiên tiến.</p>
    <a href="#" class="bg-white text-indigo-700 font-bold px-8 py-3 rounded-full hover:bg-slate-100 transition">Xem thêm</a>
</section>

3.3. 🎯 Card sản phẩm/dịch vụ

Sử dụng Grid layout để hiển thị 3 card sản phẩm, mỗi card có hình ảnh, mô tả và hiệu ứng hover.

Ảnh SP 1

Sản phẩm 1

Mô tả ngắn gọn về sản phẩm hoặc dịch vụ này.

Ảnh SP 2

Sản phẩm 2

Mô tả ngắn gọn về sản phẩm hoặc dịch vụ này.

Ảnh SP 3

Sản phẩm 3

Mô tả ngắn gọn về sản phẩm hoặc dịch vụ này.

<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
    <div class="bg-white rounded-lg shadow-md overflow-hidden transition hover:scale-105 hover:shadow-xl">
        <img src="path/to/image1.jpg" alt="Sản phẩm 1" class="w-full h-48 object-cover">
        <div class="p-6">
            <h3 class="font-bold text-lg mb-2">Sản phẩm 1</h3>
            <p class="text-sm text-slate-600">Mô tả...</p>
        </div>
    </div>
    <!-- More cards -->
</div>

3.4. 🎯 Đánh giá của khách hàng

Tạo khối lời khen từ khách hàng để tăng độ tin cậy, bao gồm trích dẫn, ảnh đại diện và tên.

"Dịch vụ tuyệt vời, sản phẩm chất lượng. Tôi hoàn toàn hài lòng!"

Nguyễn Văn A

Giám đốc, Công ty ABC

<section class="bg-indigo-500 p-8">
    <div class="max-w-2xl mx-auto text-center">
        <p class="text-xl italic text-white">"Trích dẫn..."</p>
        <div class="flex items-center justify-center mt-6">
            <img src="path/to/avatar.jpg" class="w-16 h-16 rounded-full mr-4">
            <div>
                <p class="font-bold text-white">Tên khách hàng</p>
                <p class="text-sm text-indigo-200">Chức danh</p>
            </div>
        </div>
    </div>
</section>

3.5. 🎯 Form liên hệ

Tạo một form liên hệ đơn giản với các trường nhập liệu và nút "Gửi đi".

<form class="space-y-4">
    <div>
        <label>Tên của bạn</label>
        <input type="text" class="mt-1 block w-full border-slate-300 rounded-md focus:ring-indigo-500">
    </div>
    <!-- More fields -->
    <button type="submit" class="w-full bg-indigo-600 text-white py-2 rounded-md">Gửi đi</button>
</form>

3.6. 🎯 Footer

Xây dựng footer với nền tối, chữ trắng và chia thành 3 cột thông tin responsive.

<footer class="bg-slate-900 text-slate-300 p-8">
    <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
        <div> <!-- Cột 1 --> </div>
        <div> <!-- Cột 2 --> </div>
        <div> <!-- Cột 3 --> </div>
    </div>
    <p class="text-center text-xs mt-8">Copyright@Th.S Đỗ Trung Thành. Website: dothanhspyb.com</p>
</footer>

🛠 Phần 4: Tuỳ biến & Tối ưu hóa

Đây là bước cuối cùng để làm cho trang web của bạn trở nên độc đáo và chuyên nghiệp. Bạn sẽ học cách tùy chỉnh hệ thống thiết kế của Tailwind, từ màu sắc, font chữ cho đến việc tối ưu hóa file CSS cho sản phẩm cuối cùng.

🎯 Bài tập: Tuỳ chỉnh theme

Mở file `tailwind.config.js`, thêm màu sắc và font chữ mới, sau đó áp dụng chúng vào trang web.

Vì đây là môi trường CDN, chúng ta không thể sửa `tailwind.config.js`. Thay vào đó, hãy tưởng tượng rằng bạn đã định nghĩa màu `brand-primary` là màu cam và `font-heading` là một font khác. Xem ví dụ bên dưới.

Tiêu đề với font tùy chỉnh

// Trong tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'brand-primary': '#FF6347',
      },
      fontFamily: {
        'heading': ['Georgia', 'serif'],
      },
    },
  },
}
<!-- Trong HTML -->
<h1 class="font-heading text-4xl">Tiêu đề</h1>
<button class="bg-brand-primary text-white">Nút</button>