Màu sắc có thể thu hút ánh nhìn, bố cục có thể tạo sự cân đối — nhưng chữ viết mới là thứ mà người dùng tiếp xúc nhiều nhất trên một trang web. Nội dung càng dễ đọc, trải nghiệm càng tốt. Và typography không chỉ đơn thuần là chọn font chữ: đó còn là cách bạn trình bày văn bản sao cho hài hòa, rõ ràng, chuyên nghiệp.
Trong bài học hôm nay, chúng ta sẽ cùng khám phá cách Tailwind CSS giúp bạn kiểm soát kiểu chữ, kích cỡ, độ đậm, khoảng cách dòng, và khoảng cách giữa các ký tự — tất cả đều thông qua những class rất dễ nhớ.
Tailwind giúp bạn định dạng chữ ra sao?
Tailwind CSS cung cấp rất nhiều class tiện ích để bạn điều chỉnh typography, bao gồm:
| Thuộc tính | Class ví dụ | Mô tả |
|---|---|---|
| Font size | text-sm, text-xl, text-4xl | Điều chỉnh kích cỡ chữ |
| Font weight | font-light, font-bold | Độ đậm nhạt |
| Font family | font-sans, font-serif | Kiểu font: không chân, có chân |
| Line height | leading-snug, leading-loose | Khoảng cách giữa các dòng |
| Letter spacing | tracking-tight, tracking-wide | Khoảng cách giữa các ký tự |
| Text alignment | text-left, text-center | Căn lề văn bản |
| Text transform | uppercase, lowercase | Chuyển đổi chữ hoa, thường |
| Italic/underline | italic, underline | Kiểu chữ nghiêng, gạch chân |
Ví dụ: Tiêu đề đơn giản
<h1 class="text-3xl font-bold text-gray-800">
Chào mừng bạn đến với trang học Tailwind!
</h1>
Ở đây:
text-3xl: kích thước chữ lớnfont-bold: chữ in đậmtext-gray-800: màu chữ xám đậm
Bạn thấy đó, chỉ cần vài class là đã có một tiêu đề đẹp mắt, rõ ràng.
Các cấp độ font-size mặc định
Tailwind chia font size thành các mức từ nhỏ đến rất lớn:
| Class | Kích thước | Gợi ý sử dụng |
|---|---|---|
text-xs | Rất nhỏ | Chú thích, caption |
text-sm | Nhỏ | Nội dung phụ |
text-base | Mặc định | Văn bản chính |
text-lg | Hơi lớn | Tiêu đề phụ |
text-xl | Lớn | Tiêu đề |
text-2xl…text-6xl | Rất lớn | Trang hero, tiêu điểm |
Tương tác nhỏ: Thử thiết kế đoạn văn
Bạn hãy thử đoạn HTML sau và cảm nhận cách các class ảnh hưởng đến việc trình bày:
<div class="max-w-md mx-auto p-4">
<h2 class="text-xl font-semibold text-gray-800 mb-2">Giới thiệu khóa học</h2>
<p class="text-base text-gray-700 leading-relaxed tracking-normal">
Khóa học này giúp bạn làm quen với Tailwind CSS một cách bài bản, dễ hiểu và có hệ thống.
Bạn sẽ học được cách xây dựng giao diện hiện đại mà không cần viết CSS thủ công.
</p>
</div>
Bạn có thể thử thay text-base thành text-lg, đổi leading-relaxed sang leading-tight, hoặc điều chỉnh tracking để thấy sự khác biệt.
Kết hợp nhiều lớp typography
Bạn có thể kết hợp nhiều lớp để định dạng từng phần văn bản một cách linh hoạt.
Ví dụ: Card giới thiệu
<div class="p-6 bg-white shadow rounded max-w-md mx-auto">
<h3 class="text-2xl font-bold text-blue-700 mb-2">Tailwind CSS là gì?</h3>
<p class="text-gray-700 text-base leading-relaxed">
Tailwind là một framework CSS hiện đại giúp bạn xây dựng giao diện bằng cách lắp ghép các class nhỏ, thay vì viết CSS riêng cho từng phần tử.
</p>
<p class="text-sm text-gray-500 mt-4 italic">Bài học số 7 - Typography</p>
</div>
Ở đây, từng đoạn văn bản có định dạng khác nhau tùy mục đích: tiêu đề nổi bật, nội dung rõ ràng, ghi chú nhỏ nhẹ nhàng.
Tổng kết kiến thức
| Class | Mô tả |
|---|---|
text-base | Cỡ chữ mặc định (16px) |
font-bold | In đậm |
leading-loose | Dãn dòng rộng |
tracking-tight | Ký tự sát nhau |
text-center | Căn giữa văn bản |
uppercase | Viết hoa toàn bộ |
italic, underline | Nghiêng và gạch chân văn bản |
Tóm tắt bài học
- Tailwind cung cấp hàng loạt class tiện ích giúp bạn điều chỉnh kiểu chữ, kích thước, khoảng cách dòng, khoảng cách ký tự và cách căn chỉnh văn bản.
- Thay vì viết nhiều dòng CSS, bạn chỉ cần kết hợp các class để định hình cách văn bản hiển thị.
- Typography tốt giúp tăng tính chuyên nghiệp, tăng khả năng đọc hiểu và tạo sự nhất quán trong toàn bộ trang web.
Văn bản đã rõ ràng, bố cục đã hợp lý, màu sắc cũng đã có. Nhưng thiết kế web hiện đại không chỉ dừng lại ở cái đẹp tĩnh — nó còn cần tương tác và phản hồi. Ở bài sau, chúng ta sẽ học về các trạng thái đặc biệt trong Tailwind như hover, focus, active, và cách thêm hiệu ứng động để giao diện sống động hơn.
Bạn đã sẵn sàng nâng cấp giao diện với hiệu ứng tương tác chưa? Chúng ta cùng bước sang Bài 8: Xử lý trạng thái hover, focus và active nhé.
Thảo luận