✒️ Tailwind CSS Typography: Làm Chủ Text, Font, Leading và Tracking

Dưới đây là bài viết tiếp theo trong chuỗi học Tailwind CSS cho front-end developer, tập trung vào nhóm tiện ích điều khiển kiểu chữ (typography): text (kích thước, màu), font (kiểu chữ, trọng số), leading (dòng), tracking (khoảng cách chữ).

✨ Giới thiệu

Typography (kiểu chữ) không chỉ là yếu tố thẩm mỹ, mà còn ảnh hưởng trực tiếp đến trải nghiệm người dùng và khả năng đọc. Tailwind CSS cung cấp hàng loạt class utility để bạn:

• Thay đổi kích thước và màu chữ (text-*)
• Điều chỉnh font và độ đậm (font-*)
• Kiểm soát khoảng cách dòng (leading-*)
• Canh chỉnh khoảng cách ký tự (tracking-*)

Hãy cùng khám phá cách làm chủ chúng để tạo ra giao diện chuyên nghiệp, rõ ràng, đẹp mắt.

🔹 1. text-* – Kích thước & màu chữ

Kích thước

Tailwind cung cấp thang đo từ siêu nhỏ đến cực lớn:

📌 Ví dụ:

<p class="text-base md:text-xl">Đoạn văn có kích thước chữ responsive</p>

Màu sắc

Tailwind cung cấp bảng màu tiện dụng với nhiều sắc độ:

<h1 class="text-blue-600">Tiêu đề nổi bật</h1>
<p class="text-gray-500">Chữ phụ trợ</p>

🔹 2. font-* – Font chữ và trọng số

Kiểu chữ

Bạn có thể tùy biến thêm font trong tailwind.config.js:

theme: {
  extend: {
    fontFamily: {
      heading: ['"Playfair Display"', 'serif'],
      code: ['Fira Code', 'monospace'],
    }
  }
}

Trọng số

📌 Ví dụ:

<h2 class="font-serif font-bold text-2xl">Tiêu đề có chân, đậm</h2>

🔹 3. leading-* – Khoảng cách dòng (line-height)

📌 Ví dụ:

<p class="text-gray-700 leading-relaxed">
  Đây là đoạn văn có khoảng cách dòng dễ đọc, phù hợp cho nội dung dài.
</p>

🔹 4. tracking-* – Khoảng cách giữa các ký tự

📌 Ví dụ:

<h1 class="tracking-widest uppercase text-gray-900 text-lg font-bold">GIAO DIỆN UI</h1>

🧠 Kết hợp thực tế

<div class="max-w-xl mx-auto p-6">
  <h2 class="text-3xl font-heading font-bold text-blue-700 mb-4 tracking-tight">
    Làm quen với Typography
  </h2>
  <p class="text-gray-700 text-base leading-relaxed">
    Tailwind CSS giúp bạn định dạng chữ nhanh chóng và dễ đọc hơn. Thay vì viết hàng loạt dòng CSS, bạn chỉ cần gán đúng class cho phần tử HTML.
  </p>
</div>

📱 Responsive & Hover Support

Bạn có thể sử dụng các class sm:, md: hoặc hover: cho typography:

<p class="text-base sm:text-lg md:text-xl hover:text-indigo-600">
  Chữ thay đổi kích thước theo thiết bị và đổi màu khi hover
</p>

✅ Kết luận

Typography là linh hồn của giao diện web. Tailwind CSS giúp bạn kiểm soát mọi chi tiết liên quan đến chữ: từ kích thước, khoảng cách dòng, kiểu font, đến mức độ tương phản và tương tác.

Hãy tận dụng hệ thống utility class này để giao diện bạn không chỉ đẹp mà còn dễ đọc – dễ dùng.