HTML, CSS

Hướng dẫn Tự học Tailwind CSS (Đơn giản, Hiệu quả)

Posted on by Đỗ Thành
22
Th6
View: 28

Tailwind CSS là một framework CSS utility-first, khác biệt hoàn toàn so với các framework truyền thống như Bootstrap. Thay vì cung cấp các component định sẵn, Tailwind cung cấp hàng ngàn class utility nhỏ gọn, cho phép bạn xây dựng giao diện trực tiếp trong HTML mà không cần viết CSS tùy chỉnh.

Tham khảo Tài liệu Tự học Tailwind CSS

Tham khảo Cẩm Nang Tailwind CSS

🔰 PHẦN 1: Chuẩn bị & Cài đặt

Tailwind là gì? So sánh với Bootstrap và CSS truyền thống

  • Tailwind CSS (Utility-first):
    • Cung cấp các class tiện ích (utility classes) như flex, pt-4, text-center, bg-blue-500 để xây dựng giao diện trực tiếp trong HTML.
    • Giúp tăng tốc độ phát triển, dễ dàng tạo ra các thiết kế độc đáo mà không bị ràng buộc bởi các component có sẵn.
    • Kích thước file CSS nhỏ gọn hơn do chỉ bao gồm các class được sử dụng.
    • Đòi hỏi bạn phải làm quen với nhiều class.
    • Ví dụ: <div class="bg-blue-500 text-white p-4 rounded">Hello</div>
  • Bootstrap (Component-first):
    • Cung cấp các component (thành phần) dựng sẵn như navbar, button, card.
    • Giúp nhanh chóng có được giao diện chuẩn, đẹp mắt.
    • Có thể bị trùng lặp giao diện với các trang web khác dùng Bootstrap.
    • Kích thước file CSS thường lớn hơn do chứa nhiều component không dùng đến.
    • Ví dụ: <button class="btn btn-primary">Submit</button>
  • CSS truyền thống:
    • Viết CSS từ đầu, kiểm soát hoàn toàn giao diện.
    • Thời gian phát triển lâu hơn, dễ dẫn đến CSS cồng kềnh, khó bảo trì.
    • Ví dụ:
.my-button {
    background-color: blue;
    color: white;
    padding: 10px;
    border-radius: 5px;
}
```html
<button class="my-button">Submit</button>

Cài đặt môi trường làm việc

  1. Cài Node.js: Tailwind CSS được xây dựng trên Node.js, vì vậy bạn cần cài đặt Node.js để sử dụng CLI và quản lý gói.
    • Truy cập trang web chính thức của Node.js: https://nodejs.org/
    • Tải xuống phiên bản LTS (Long Term Support) và cài đặt theo hướng dẫn.
    • Kiểm tra cài đặt thành công bằng cách mở Terminal/CMD và gõ: node -v và npm -v
  2. Cài VS Code: Trình soạn thảo mã nguồn mạnh mẽ và miễn phí, rất phù hợp cho phát triển web.
    • Truy cập trang web chính thức của VS Code: https://code.visualstudio.com/
    • Tải xuống và cài đặt.

Tạo dự án: Cấu trúc thư mục

Để bắt đầu, bạn hãy tạo một thư mục trống cho dự án của mình, ví dụ: my-tailwind-project.

my-tailwind-project/
├── public/
│   └── index.html  (file HTML chính)
└── src/
    └── input.css   (file CSS đầu vào của Tailwind)

Cài Tailwind qua CLI (hoặc CDN)

Cách 1: Cài đặt qua CLI (Được khuyến nghị cho dự án thực tế)

  1. Mở Terminal/CMD, điều hướng đến thư mục dự án của bạn (my-tailwind-project).
  2. Khởi tạo dự án Node.js:
npm init -y

3. Cài đặt Tailwind CSS và các dependency khác:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

4. Cấu hình tailwind.config.js: Mở file tailwind.config.js và thêm đường dẫn tới các file HTML (hoặc JS frameworks) của bạn vào phần content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./public/**/*.{html,js}", // Đường dẫn đến các file HTML, JS của bạn
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

5. Tạo file src/input.css: Đây là file CSS gốc của bạn, nơi bạn sẽ @import các lớp cơ bản của Tailwind.

@tailwind base;
@tailwind components;
@tailwind utilities;

6. Thêm lệnh Build vào package.json: Mở file package.json và thêm script để build Tailwind CSS.

{
  "name": "my-tailwind-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tailwindcss -i ./src/input.css -o ./public/output.css",
    "watch": "tailwindcss -i ./src/input.css -o ./public/output.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.4"
  }
}
  • npm run build: Để build một lần ra file output.css (dùng khi deploy).
  • npm run watch: Để theo dõi sự thay đổi của file input.css và tự động build lại mỗi khi có thay đổi (dùng khi phát triển).

7. Liên kết output.css vào index.html: Trong file public/index.html, hãy liên kết đến file CSS đã build.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwind</title>
    <link href="./output.css" rel="stylesheet">
</head>
<body>
    <!-- Nội dung của bạn -->
</body>
</html>

Cách 2: Sử dụng CDN (Chỉ nên dùng cho các dự án nhỏ hoặc thử nghiệm nhanh)

Bạn chỉ cần thêm một dòng script vào thẻ <head> của file HTML của mình:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Tailwind</title>
    <script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script>
</head>
<body>
    <!-- Nội dung của bạn -->
</body>
</html>

Với cách này, Tailwind sẽ tự động quét các class trong HTML của bạn khi tải trang.

🎯 Bài tập thực hành: Tạo trang HTML đầu tiên có dòng chữ “Hello Tailwind” canh giữa, nền xám.

  1. Tạo file public/index.html trong thư mục dự án của bạn.
  2. Sử dụng cấu trúc cơ bản của một file HTML.
  3. Áp dụng các class của Tailwind để căn giữa chữ và đặt nền màu xám.

Gợi ý các class cần dùng:

  • flex, items-center, justify-center: Để căn giữa nội dung.
  • min-h-screen: Để div chiếm toàn bộ chiều cao màn hình.
  • bg-gray-200: Để đặt màu nền xám.
  • text-3xl, font-bold: Để làm cho chữ to và đậm.

🎨 PHẦN 2: Thiết kế khung website

Layout cơ bản

Tailwind CSS cung cấp các utility class mạnh mẽ để tạo bố cục (layout) cho website.

  • container:
    • Giúp giới hạn chiều rộng nội dung để nó không trải dài toàn bộ màn hình, tạo khoảng trống hai bên.
    • Sử dụng kèm với mx-auto để căn giữa.
    • Ví dụ: <div class="container mx-auto">Nội dung</div>
  • flex (Flexbox):
    • Hệ thống bố cục 1 chiều (hàng hoặc cột). Rất linh hoạt để căn chỉnh các item.
    • flex: Biến element thành flex container.
    • flex-row, flex-col: Hướng của flex item.
    • justify-start, justify-end, justify-center, justify-between, justify-around: Căn chỉnh item trên trục chính.
    • items-start, items-end, items-center, items-baseline, items-stretch: Căn chỉnh item trên trục vuông góc.
    • gap-x-, gap-y-, gap-: Khoảng cách giữa các flex item.
    • Ví dụ: <div class="flex justify-center items-center gap-4">...</div>
  • grid (Grid Layout):
    • Hệ thống bố cục 2 chiều (hàng và cột). Tuyệt vời cho các bố cục phức tạp hơn.
    • grid: Biến element thành grid container.
    • grid-cols-1, grid-cols-2, grid-cols-3, …: Số lượng cột.
    • grid-rows-1, grid-rows-2, …: Số lượng hàng.
    • col-span-, row-span-: Item chiếm bao nhiêu cột/hàng.
    • gap-x-, gap-y-, gap-: Khoảng cách giữa các grid item.
    • Ví dụ: <div class="grid grid-cols-3 gap-6">...</div>
  • max-w-:
    • Đặt giới hạn chiều rộng tối đa cho một element. Thường dùng cho text hoặc hình ảnh để không quá rộng.
    • Ví dụ: max-w-xl (chiều rộng tối đa 36rem/576px), max-w-full (100%).
  • spacing (padding p-, margin m-):
    • Kiểm soát khoảng cách bên trong (padding) và bên ngoài (margin) của một element.
    • p-4, py-8, px-6, pt-2, pb-3, pl-4, pr-5.
    • m-auto, mx-auto, my-auto, mt-4, mb-2, ml-1, mr-auto.
    • Các giá trị mặc định của Tailwind dựa trên hệ số 4px (ví dụ: p-4 là 16px).

Responsive: sm:, md:, lg:, xl:

Tailwind CSS được xây dựng với tư tưởng mobile-first. Điều này có nghĩa là các class mặc định (không có prefix) sẽ áp dụng cho màn hình nhỏ nhất (mobile), và sau đó bạn có thể ghi đè chúng cho các breakpoint lớn hơn.

  • sm: (Small): >= 640px
  • md: (Medium): >= 768px
  • lg: (Large): >= 1024px
  • xl: (Extra Large): >= 1280px
  • 2xl: (Double Extra Large): >= 1536px

Ví dụ:

<div class="bg-red-500 md:bg-blue-500 lg:bg-green-500">
    Màu nền sẽ là đỏ trên mobile, xanh dương trên màn hình medium trở lên, và xanh lá trên màn hình large trở lên.
</div>

Tạo file giao diện tổng thể

Một cấu trúc website cơ bản thường bao gồm:

  • Header: Chứa logo, thanh điều hướng (navbar).
  • Nội dung chính: Phần lớn nội dung của trang web, có thể chia thành nhiều section (banner, giới thiệu, sản phẩm, liên hệ…).
  • Footer: Chứa thông tin bản quyền, liên hệ, các đường dẫn phụ.

Chúng ta sẽ tạo một file index.html duy nhất để xây dựng toàn bộ giao diện này.

🎯 Thực hành: Vẽ khung website có 3 phần: Header (logo, menu), Nội dung, Footer (thông tin liên hệ)

Yêu cầu:

  1. Tạo một file public/index.html mới (hoặc sửa đổi file cũ).
  2. Sử dụng cấu trúc HTML cơ bản.
  3. Tạo ba thẻ <div> chính đại diện cho Header, Nội dung và Footer.
  4. Sử dụng các class Tailwind để:
    • Cho Header và Footer có nền màu đậm (ví dụ: bg-gray-800), chữ màu trắng (text-white).
    • Nội dung chính có nền màu sáng hơn (ví dụ: bg-gray-100).
    • Sử dụng p-4 hoặc p-8 để tạo khoảng đệm bên trong các phần.
    • Canh giữa nội dung trong Header và Footer.
    • Thêm text đơn giản vào mỗi phần để dễ hình dung (ví dụ: “Logo”, “Menu”, “Nội dung chính của trang web”, “Thông tin liên hệ, bản quyền”).
    • Đảm bảo các phần này hiển thị đúng trên các kích thước màn hình khác nhau (responsive).

Gợi ý cấu trúc HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Khung Website Tailwind</title>
    <link href="./output.css" rel="stylesheet"> <!-- Nếu dùng CLI -->
    <!-- Hoặc <script src="[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)"></script> nếu dùng CDN -->
</head>
<body class="font-sans">
    <!-- Header -->
    <header class="bg-gray-800 text-white p-4">
        <div class="container mx-auto flex justify-between items-center">
            <!-- Logo -->
            <div class="text-2xl font-bold">Logo</div>
            <!-- Menu -->
            <nav>
                <ul class="flex space-x-4">
                    <li><a href="#" class="hover:text-gray-300">Trang chủ</a></li>
                    <li><a href="#" class="hover:text-gray-300">Sản phẩm</a></li>
                    <li><a href="#" class="hover:text-gray-300">Giới thiệu</a></li>
                    <li><a href="#" class="hover:text-gray-300">Liên hệ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container mx-auto my-8 p-4 bg-white shadow-lg rounded-lg">
        <h1 class="text-3xl font-bold mb-4">Nội dung chính của trang web</h1>
        <p class="text-gray-700">
            Đây là nơi bạn sẽ thêm các phần khác nhau của website như banner, giới thiệu, sản phẩm, đánh giá khách hàng, v.v.
        </p>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white p-8 mt-8">
        <div class="container mx-auto text-center">
            <p>&copy; 2023 Tên công ty của bạn. Mọi quyền được bảo lưu.</p>
            <p class="text-sm mt-2">Địa chỉ: 123 Đường ABC, Quận XYZ, TP.HCM | Điện thoại: 0123 456 789</p>
        </div>
    </footer>
</body>
</html>

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

Trong phần này, chúng ta sẽ đi sâu vào việc xây dựng các thành phần phổ biến của một trang web.

3.1. Header và Thanh điều hướng (Navbar)

Một header chuẩn sẽ bao gồm logo và thanh điều hướng. Chúng ta sẽ làm thanh điều hướng ngang và có khả năng ẩn hiện trên mobile.

  • Menu ngang với Flexbox: Sử dụng flex và space-x- để tạo các mục menu nằm ngang và có khoảng cách đều nhau.
  • Hover effect: Dùng hover: prefix để thay đổi màu chữ hoặc nền khi rê chuột vào.
  • Responsive Menu (ẩn hiện trên mobile):
    • Tạo một nút “hamburger” (icon 3 gạch) chỉ hiển thị trên mobile (md:hidden).
    • Thanh menu chính sẽ ẩn trên mobile (hidden) và hiện trên desktop (md:flex).
    • Để làm menu ẩn hiện thực sự cần JavaScript, nhưng ở đây chúng ta sẽ chỉ tập trung vào việc tạo cấu trúc HTML/CSS bằng Tailwind.

🎯 Làm: Thanh điều hướng đơn giản với 4 mục menu

Yêu cầu:

  1. Sử dụng lại Header đã tạo ở bài tập trước.
  2. Thay thế “Menu” bằng một thanh điều hướng thực tế.
  3. Đảm bảo các mục menu nằm ngang và có khoảng cách.
  4. Khi rê chuột vào một mục menu, màu chữ sẽ thay đổi.
  5. Bonus (không bắt buộc dùng JS ở bước này): Thử hình dung cách tạo nút hamburger và menu ẩn/hiện trên mobile.

Gợi ý HTML:

<header class="bg-gray-800 text-white p-4">
    <div class="container mx-auto flex justify-between items-center">
        <!-- Logo -->
        <div class="text-2xl font-bold">MyLogo</div>

        <!-- Menu Desktop (hiển thị trên màn hình trung bình trở lên) -->
        <nav class="hidden md:block">
            <ul class="flex space-x-6">
                <li><a href="#" class="hover:text-blue-400 transition duration-300">Trang chủ</a></li>
                <li><a href="#" class="hover:text-blue-400 transition duration-300">Sản phẩm</a></li>
                <li><a href="#" class="hover:text-blue-400 transition duration-300">Giới thiệu</a></li>
                <li><a href="#" class="hover:text-blue-400 transition duration-300">Liên hệ</a></li>
            </ul>
        </nav>

        <!-- Mobile Menu Button (ẩn trên màn hình trung bình trở lên) -->
        <div class="md:hidden">
            <button class="text-white focus:outline-none">
                <!-- Icon hamburger, ví dụ dùng SVG hoặc một thư viện icon -->
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
            </button>
        </div>
    </div>

    <!-- Mobile Menu (sẽ hiện ra khi nút hamburger được nhấn, cần JS để điều khiển) -->
    <!-- Trong thực tế, bạn sẽ thêm các class như 'hidden' và loại bỏ nó bằng JS khi click -->
    <nav class="md:hidden bg-gray-700 mt-2 py-2">
        <ul class="flex flex-col items-center space-y-2">
            <li><a href="#" class="block px-4 py-2 hover:bg-gray-600 w-full text-center">Trang chủ</a></li>
            <li><a href="#" class="block px-4 py-2 hover:bg-gray-600 w-full text-center">Sản phẩm</a></li>
            <li><a href="#" class="block px-4 py-2 hover:bg-gray-600 w-full text-center">Giới thiệu</a></li>
            <li><a href="#" class="block px-4 py-2 hover:bg-gray-600 w-full text-center">Liên hệ</a></li>
        </ul>
    </nav>
</header>

3.2. Banner / Hero Section

Banner hoặc Hero Section là phần đầu tiên mà người dùng nhìn thấy khi truy cập website, thường bao gồm một tiêu đề lớn, mô tả ngắn gọn và một nút kêu gọi hành động (Call to Action – CTA).

  • Căn giữa nội dung: Sử dụng flex, flex-col, items-center, justify-center.
  • Tiêu đề lớn: Dùng các class text-5xl, font-extrabold.
  • Mô tả: text-lg, text-gray-200.
  • Nút CTA: Tạo nút với các màu sắc nổi bật, hiệu ứng hover, padding, bo góc. Ví dụ: bg-blue-600, text-white, px-6, py-3, rounded-full, hover:bg-blue-700.

🎯 Làm: Banner có nút “Xem thêm”, màu sắc nổi bật

Yêu cầu:

  1. Tạo một section mới ngay dưới header trong file index.html.
  2. Đặt nền cho section này với một màu sắc nổi bật hoặc hình ảnh nền (nếu muốn).
  3. Thêm một tiêu đề lớn, một đoạn mô tả và một nút “Xem thêm”.
  4. Đảm bảo nội dung được căn giữa.

Gợi ý HTML:

<section class="bg-gradient-to-r from-purple-500 to-indigo-600 text-white py-20 flex items-center justify-center min-h-[400px]">
    <div class="container mx-auto text-center px-4">
        <h1 class="text-4xl md:text-6xl font-extrabold leading-tight mb-4 animate-fadeInDown">
            Chào mừng đến với Website của chúng tôi!
        </h1>
        <p class="text-lg md:text-xl mb-8 opacity-0 animate-fadeInUp delay-200">
            Khám phá những giải pháp công nghệ tiên tiến nhất dành cho doanh nghiệp của bạn.
        </p>
        <a href="#" class="bg-white text-indigo-700 hover:bg-gray-100 px-8 py-4 rounded-full text-lg font-bold shadow-lg transition duration-300 ease-in-out transform hover:scale-105 opacity-0 animate-fadeInUp delay-400">
            Xem thêm
        </a>
    </div>
</section>

(Lưu ý: Các class animate-fadeInDown, animate-fadeInUp yêu cầu custom animation trong tailwind.config.js hoặc dùng thư viện như Animate.css)

3.3. Giới thiệu sản phẩm/dịch vụ

Hiển thị danh sách sản phẩm hoặc dịch vụ thường dùng grid layout. Mỗi sản phẩm/dịch vụ sẽ là một “card” (thẻ) với hình ảnh, tiêu đề và mô tả.

  • Grid layout: Sử dụng grid và grid-cols- để tạo các cột, responsive với md:grid-cols-, lg:grid-cols-.
  • Card design:
    • Nền trắng, đổ bóng (shadow-lg).
    • Bo góc (rounded-lg).
    • Padding bên trong (p-6).
    • Hình ảnh: w-full, h-48, object-cover.
    • Hiệu ứng hover: hover:shadow-xl, hover:scale-105 (sử dụng transition, transform để có hiệu ứng mượt mà).

🎯 Làm: 3 card sản phẩm, mỗi card có hình + mô tả

Yêu cầu:

  1. Tạo một section mới dưới banner.
  2. Sử dụng grid để hiển thị 3 card sản phẩm/dịch vụ.
  3. Trên mobile, các card xếp chồng lên nhau (1 cột). Trên tablet (md) và desktop (lg), các card hiển thị 2 hoặc 3 cột.
  4. Mỗi card có:
    • Một hình ảnh (có thể dùng placeholder image).
    • Một tiêu đề sản phẩm/dịch vụ.
    • Một đoạn mô tả ngắn.
    • Các hiệu ứng: đổ bóng, bo góc, và hiệu ứng khi rê chuột vào.

Gợi ý HTML:

<section class="container mx-auto my-16 px-4">
    <h2 class="text-4xl font-bold text-center mb-12">Sản phẩm/Dịch vụ của chúng tôi</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Product Card 1 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <img src="[https://placehold.co/600x400/F0F0F0/333333?text=Sản+phẩm+1](https://placehold.co/600x400/F0F0F0/333333?text=Sản+phẩm+1)" alt="Sản phẩm 1" class="w-full h-48 object-cover">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">Tên sản phẩm/dịch vụ 1</h3>
                <p class="text-gray-600 text-sm">
                    Mô tả ngắn gọn về sản phẩm hoặc dịch vụ đầu tiên. Nêu bật các đặc điểm chính và lợi ích.
                </p>
                <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition duration-300">
                    Chi tiết
                </button>
            </div>
        </div>

        <!-- Product Card 2 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <img src="[https://placehold.co/600x400/E0E0E0/333333?text=Sản+phẩm+2](https://placehold.co/600x400/E0E0E0/333333?text=Sản+phẩm+2)" alt="Sản phẩm 2" class="w-full h-48 object-cover">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">Tên sản phẩm/dịch vụ 2</h3>
                <p class="text-gray-600 text-sm">
                    Mô tả ngắn gọn về sản phẩm hoặc dịch vụ thứ hai. Tập trung vào giá trị mà nó mang lại.
                </p>
                <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition duration-300">
                    Chi tiết
                </button>
            </div>
        </div>

        <!-- Product Card 3 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-xl">
            <img src="[https://placehold.co/600x400/D0D0D0/333333?text=Sản+phẩm+3](https://placehold.co/600x400/D0D0D0/333333?text=Sản+phẩm+3)" alt="Sản phẩm 3" class="w-full h-48 object-cover">
            <div class="p-6">
                <h3 class="text-xl font-semibold mb-2">Tên sản phẩm/dịch vụ 3</h3>
                <p class="text-gray-600 text-sm">
                    Mô tả ngắn gọn về sản phẩm hoặc dịch vụ thứ ba. Giải thích cách nó giải quyết vấn đề.
                </p>
                <button class="mt-4 bg-blue-500 text-white px-4 py-2 rounded-full hover:bg-blue-600 transition duration-300">
                    Chi tiết
                </button>
            </div>
        </div>
    </div>
</section>

3.4. Testimonials / Đánh giá khách hàng

Phần đánh giá khách hàng giúp tăng độ tin cậy cho website.

  • Quote: Sử dụng các class như italic, text-xl, text-gray-700 cho nội dung đánh giá.
  • Hình đại diện + tên: Sử dụng flex để sắp xếp hình ảnh và thông tin người đánh giá.
  • Carousel (Nâng cao): Để tạo carousel (slideshow) cho các đánh giá, bạn sẽ cần JavaScript. Ở đây chúng ta chỉ tập trung vào việc tạo cấu trúc một khối đánh giá đơn lẻ.

🎯 Làm: Tạo khối lời khen từ khách hàng

Yêu cầu:

  1. Tạo một section mới dưới phần sản phẩm.
  2. Thiết kế một khối đánh giá khách hàng bao gồm:
    • Biểu tượng trích dẫn (ví dụ: dấu ngoặc kép lớn).
    • Nội dung lời khen (dạng in nghiêng).
    • Hình đại diện của khách hàng (dùng placeholder image).
    • Tên khách hàng và chức danh/công ty.
  3. Căn giữa nội dung.

Gợi ý HTML:

<section class="bg-blue-500 py-16 px-4">
    <div class="container mx-auto text-center text-white">
        <h2 class="text-4xl font-bold mb-10">Khách hàng nói gì về chúng tôi</h2>
        <div class="max-w-3xl mx-auto bg-white text-gray-800 p-8 rounded-lg shadow-xl relative">
            <svg class="absolute top-4 left-4 w-12 h-12 text-blue-300 opacity-50" fill="currentColor" viewBox="0 0 24 24"><path d="M11 9H9V2H7v7H5V2H3v7c0 2.21 1.79 4 4 4h4v-4zm-2 4h2V2h-2v11zm10 0v-4h-2V2h-2v11c0 2.21 1.79 4 4 4h4v-4h-2z"/></svg>
            <p class="text-xl italic mb-6">
                "Dịch vụ tuyệt vời và sản phẩm chất lượng cao! Đội ngũ hỗ trợ rất nhiệt tình và chuyên nghiệp. Tôi hoàn toàn hài lòng với trải nghiệm này."
            </p>
            <div class="flex items-center justify-center mt-6">
                <img src="[https://placehold.co/80x80/007bff/ffffff?text=AVT](https://placehold.co/80x80/007bff/ffffff?text=AVT)" alt="Ảnh đại diện khách hàng" class="w-16 h-16 rounded-full object-cover border-4 border-blue-200 shadow-md mr-4">
                <div>
                    <p class="font-semibold text-lg">Nguyễn Văn A</p>
                    <p class="text-sm text-gray-500">Giám đốc, Công ty ABC</p>
                </div>
            </div>
        </div>
    </div>
</section>

3.5. Liên hệ và form

Phần liên hệ thường bao gồm thông tin liên hệ và một biểu mẫu (form) để khách hàng gửi tin nhắn.

  • Form styling:
    • Bạn có thể tự style các input, textarea, button bằng các class của Tailwind (border, p-2, rounded, focus:ring, shadow-sm).
    • Hoặc sử dụng plugin Tailwind Forms để có các kiểu dáng form chuẩn và dễ tùy biến hơn. Để cài đặt: npm install -D @tailwindcss/forms và thêm vào plugins trong tailwind.config.js.

🎯 Làm: Form liên hệ có nút “Gửi đi”

Yêu cầu:

  1. Tạo một section mới cho phần liên hệ.
  2. Bên trong section này, tạo một form với các trường: Tên, Email, Nội dung.
  3. Thêm một nút “Gửi đi”.
  4. Style form cho đẹp mắt, các trường input có viền, padding, bo góc. Nút gửi có màu sắc nổi bật.

Gợi ý HTML (tự style):

<section class="container mx-auto my-16 px-4">
    <h2 class="text-4xl font-bold text-center mb-10">Liên hệ với chúng tôi</h2>
    <div class="max-w-2xl mx-auto bg-white p-8 rounded-lg shadow-xl">
        <form>
            <div class="mb-5">
                <label for="name" class="block text-gray-700 text-sm font-bold mb-2">Tên của bạn:</label>
                <input type="text" id="name" name="name" class="shadow-sm appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" placeholder="Nguyễn Văn A">
            </div>
            <div class="mb-5">
                <label for="email" class="block text-gray-700 text-sm font-bold mb-2">Email của bạn:</label>
                <input type="email" id="email" name="email" class="shadow-sm appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" placeholder="email@example.com">
            </div>
            <div class="mb-6">
                <label for="message" class="block text-gray-700 text-sm font-bold mb-2">Nội dung:</label>
                <textarea id="message" name="message" rows="6" class="shadow-sm appearance-none border rounded w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200" placeholder="Viết tin nhắn của bạn tại đây..."></textarea>
            </div>
            <div class="flex items-center justify-center">
                <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-full focus:outline-none focus:shadow-outline transition duration-300 ease-in-out transform hover:scale-105">
                    Gửi đi
                </button>
            </div>
        </form>
    </div>
</section>

3.6. Footer

Phần chân trang thường chứa thông tin bản quyền, đường dẫn hữu ích, biểu tượng mạng xã hội và thông tin liên hệ.

  • Dark background + text trắng: bg-gray-900, text-white.
  • Chia cột: Sử dụng grid hoặc flex để chia thành các cột thông tin.
  • Social icons: Có thể dùng Font Awesome hoặc SVG icons.

🎯 Làm: Footer đơn giản có 3 cột thông tin

Yêu cầu:

  1. Sử dụng lại Footer đã tạo ở bài tập đầu.
  2. Chuyển footer thành 3 cột (trên desktop):
    • Cột 1: Logo và mô tả ngắn.
    • Cột 2: Các đường dẫn nhanh (Trang chủ, Sản phẩm, Liên hệ, Chính sách).
    • Cột 3: Thông tin liên hệ (Địa chỉ, Điện thoại, Email) và biểu tượng mạng xã hội.
  3. Đảm bảo responsive: trên mobile, các cột sẽ xếp chồng lên nhau.
  4. Màu nền tối, chữ trắng.

Gợi ý HTML:

<footer class="bg-gray-900 text-gray-300 py-12 px-4">
    <div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
        <!-- Cột 1: Logo và mô tả -->
        <div class="text-center md:text-left">
            <h3 class="text-2xl font-bold text-white mb-4">MyWebsite</h3>
            <p class="text-sm">
                Chúng tôi cung cấp các giải pháp công nghệ hàng đầu, giúp doanh nghiệp của bạn phát triển bền vững.
            </p>
            <div class="flex justify-center md:justify-start mt-4 space-x-4">
                <!-- Social Icons - dùng placeholder SVG hoặc link tới Font Awesome -->
                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14h-2V8h2v8zm3 0h-2V8h2v8zm3 0h-2V8h2v8z"/></svg> <!-- Placeholder for Facebook/Twitter/LinkedIn -->
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.49-1.75.85-2.72 1.05-.78-.83-1.89-1.35-3.13-1.35-2.37 0-4.3 1.93-4.3 4.3 0 .34.04.67.11.98C8.7 8.76 5.82 7.23 3.86 4.75c-.37.64-.58 1.39-.58 2.18 0 1.49.75 2.81 1.88 3.59-.69-.02-1.34-.21-1.91-.53v.05c0 2.09 1.48 3.82 3.44 4.22-.36.1-.73.16-1.12.16-.27 0-.53-.03-.79-.08.55 1.71 2.13 2.95 4.02 2.98C15.08 17.9 16.91 18 17 18c2.14 0 3.31-.53 4.09-.94-.09-.04-.18-.08-.27-.12.83-.69 1.55-1.55 2.06-2.5C22.2 14.88 22.36 14.44 22.46 14z"/></svg>
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M7.8 2H16.2A5.8 5.8 0 0122 7.8v8.4A5.8 5.8 0 0116.2 22H7.8A5.8 5.8 0 012 16.2V7.8A5.8 5.8 0 017.8 2zm-.2 2A3.8 3.8 0 004 7.8v8.4A3.8 3.8 0 007.8 20h8.4A3.8 3.8 0 0020 16.2V7.8A3.8 3.8 0 0016.2 4H7.6zm9.6 4.2a1.5 1.5 0 110-3 1.5 1.5 0 010 3zM12 9.2A4.8 4.8 0 1012 19.8 4.8 4.8 0 0012 9.2zm0 8.2A3.4 3.4 0 1112 11.6 3.4 3.4 0 0112 17.4z"/></svg>
                </a>
            </div>
        </div>

        <!-- Cột 2: Đường dẫn nhanh -->
        <div class="text-center md:text-left">
            <h3 class="text-xl font-bold text-white mb-4">Đường dẫn nhanh</h3>
            <ul class="space-y-2">
                <li><a href="#" class="hover:text-white transition duration-300">Trang chủ</a></li>
                <li><a href="#" class="hover:text-white transition duration-300">Sản phẩm</a></li>
                <li><a href="#" class="hover:text-white transition duration-300">Giới thiệu</a></li>
                <li><a href="#" class="hover:text-white transition duration-300">Liên hệ</a></li>
                <li><a href="#" class="hover:text-white transition duration-300">Chính sách bảo mật</a></li>
            </ul>
        </div>

        <!-- Cột 3: Thông tin liên hệ -->
        <div class="text-center md:text-left">
            <h3 class="text-xl font-bold text-white mb-4">Liên hệ</h3>
            <p class="mb-2"><i class="fas fa-map-marker-alt mr-2"></i>123 Đường ABC, Quận XYZ, TP.HCM</p>
            <p class="mb-2"><i class="fas fa-phone mr-2"></i>0123 456 789</p>
            <p class="mb-2"><i class="fas fa-envelope mr-2"></i>info@mywebsite.com</p>
            <p class="mt-4 text-sm">&copy; 2023 MyWebsite. Mọi quyền được bảo lưu.</p>
        </div>
    </div>
</footer>

(Để hiển thị icons Font Awesome, bạn cần thêm <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> vào thẻ <head>).

🛠 PHẦN 4: Tuỳ biến & Tối ưu hóa

Đây là phần quan trọng giúp website của bạn trở nên độc đáo và tối ưu về hiệu suất.

Tuỳ biến màu sắc, font, spacing

Tailwind CSS cho phép bạn mở rộng hoặc ghi đè các giá trị mặc định của nó thông qua file tailwind.config.js.

  • Tuỳ biến màu sắc: Thêm màu vào theme.extend.colors.
// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      colors: {
        'primary': '#FF6347', // Màu chính của bạn
        'secondary': '#4682B4', // Màu phụ
        'custom-gray': '#F5F5F5',
      },
    },
  },
  // ...
}

Sau đó, bạn có thể sử dụng bg-primary, text-secondary, bg-custom-gray.

Tuỳ biến font chữ: Thêm font vào theme.extend.fontFamily.

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Roboto', 'Arial', 'sans-serif'], // Thay đổi font sans mặc định
        'heading': ['Montserrat', 'sans-serif'], // Thêm font mới cho tiêu đề
      },
    },
  },
  // ...
}

Sử dụng: font-heading, font-sans.

Tuỳ biến spacing: Thêm giá trị vào theme.extend.spacing (áp dụng cho padding, margin, width, height, gap…).

// tailwind.config.js
module.exports = {
  // ...
  theme: {
    extend: {
      spacing: {
        '128': '32rem', // Thêm giá trị 128 (32 * 16px = 512px)
        '144': '36rem',
      },
    },
  },
  // ...
}
  • Sử dụng: p-128, mt-144.

Sử dụng @apply

@apply là một directive của Tailwind cho phép bạn gộp nhiều utility classes vào một custom CSS class. Điều này hữu ích khi bạn có một nhóm các class được sử dụng lặp đi lặp lại hoặc muốn tạo ra các semantic class.

Ví dụ: Trong file src/input.css (hoặc một file CSS riêng được import vào input.css):

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn-primary {
  @apply bg-blue-600 text-white font-bold py-3 px-6 rounded-full hover:bg-blue-700 transition duration-300;
}

.card-shadow {
  @apply shadow-lg hover:shadow-xl transition duration-300;
}

Sau đó trong HTML:

<button class="btn-primary">Nhấn vào đây</button>
<div class="card-shadow bg-white p-6 rounded-lg">Nội dung card</div>

Lưu ý: Hạn chế lạm dụng @apply vì nó có thể làm mất đi lợi thế chính của Tailwind là utility-first. Nên dùng khi thực sự cần nhóm các class lại thành một component lớn.

Tối ưu sản phẩm

Purge CSS (nay là Content Configuration)

Tailwind tự động loại bỏ các CSS không sử dụng khi bạn build sản phẩm để deploy. Điều này giúp kích thước file CSS cực kỳ nhỏ. Bạn đã cấu hình nó ở Phần 1 thông qua content trong tailwind.config.js.

Đảm bảo content của bạn đã cấu hình đúng:

// tailwind.config.js
module.exports = {
  content: [
    "./public/**/*.{html,js}", // Đảm bảo đường dẫn này trỏ đúng đến tất cả các file có chứa class Tailwind của bạn
    // Ví dụ nếu bạn dùng React/Vue:
    // "./src/**/*.{js,jsx,ts,tsx,vue}",
  ],
  // ...
}

Khi bạn chạy npm run build, Tailwind sẽ quét các file trong content để tìm và giữ lại các class được sử dụng, loại bỏ phần còn lại.

Bật chế độ JIT (Just-In-Time)

JIT mode (chế độ JIT) là mặc định trong Tailwind CSS v3 trở lên. Nó tạo CSS on-demand khi bạn sử dụng các class, giúp quá trình phát triển nhanh hơn rất nhiều và tạo ra CSS nhỏ gọn ngay cả trong quá trình phát triển. Bạn không cần cấu hình gì thêm, nó đã tự động bật.

Responsive hoàn chỉnh

Bạn đã được giới thiệu về các breakpoint sm:, md:, lg:, xl: ở Phần 2. Để website thực sự responsive, hãy luôn nhớ:

  1. Mobile-first: Thiết kế cho mobile trước, sau đó mới đến tablet và desktop. Các class không có tiền tố sẽ áp dụng cho mobile.
  2. Sử dụng linh hoạt các breakpoint: Thay đổi grid-cols-, flex-direction, text-align, padding, margin ở các breakpoint khác nhau.
  3. Kiểm tra trên nhiều thiết bị: Sử dụng DevTools của trình duyệt (F12) để giả lập các kích thước màn hình khác nhau.

🎯 Làm: Tuỳ chỉnh theme màu, font chữ cho toàn site

Yêu cầu:

  1. Mở file tailwind.config.js.
  2. Thêm 2-3 màu sắc mới vào theme.extend.colors theo sở thích của bạn (ví dụ: brand-primary, brand-secondary).
  3. Thay đổi font chữ mặc định sans trong theme.extend.fontFamily thành một font khác mà bạn thích (ví dụ: Google Fonts như ‘Open Sans’ hoặc ‘Lato’).
  4. Áp dụng các màu và font chữ mới này vào một vài phần của website mà bạn đã xây dựng (ví dụ: đổi màu nút CTA, màu nền Header/Footer, font chữ tiêu đề).
  5. Chạy lại npm run watch (hoặc npm run build) và kiểm tra kết quả.

Tham khảo Tài liệu Tự học Tailwind CSS

Tham khảo Cẩm Nang Tailwind CSS

Đỗ Thành