Classes cho Spacing và Typography

Bài học này giúp học viên hiểu cách quản lý khoảng cách giữa các thành phần giao diện bằng padding, margin, gap và tối ưu văn bản với các class liên quan đến typography trong Tailwind CSS.

Classes cho Spacing và Typography

1. Cách thêm khoảng cách giữa các thành phần với Padding, Margin, Gap

• Padding (p-*) và Margin (m-*)

  • p-4: Thêm padding 1rem cho tất cả các cạnh.
  • px-4: Thêm padding ngang.
  • py-2: Thêm padding dọc.
  • m-4: Thêm margin 1rem cho tất cả các cạnh.
  • mx-auto: Căn giữa phần tử theo trục ngang.

• Gap (gap-*)

  • gap-4: Thêm khoảng cách giữa các phần tử con trong grid hoặc flex.

• Ví dụ:

<div class="flex gap-4">
  <div class="bg-blue-500 p-4 text-white">Item 1</div>
  <div class="bg-green-500 p-4 text-white">Item 2</div>
</div>

2. Tối ưu văn bản với các Class Typography

• Text Size (text-*)

  • text-sm: Cỡ chữ nhỏ.
  • text-xl: Cỡ chữ lớn.
  • text-4xl: Cỡ chữ rất lớn.

• Font Style (font-*)

  • font-sans: Sử dụng font sans-serif.
  • font-bold: Văn bản đậm.
  • font-light: Văn bản mỏng.

• Line Height (leading-*)

  • leading-none: Không có khoảng cách giữa các dòng.
  • leading-loose: Khoảng cách dòng lớn.

• Ví dụ:

<div class="p-4">
  <h1 class="text-3xl font-bold leading-tight text-gray-800">Tiêu đề nổi bật</h1>
  <p class="text-base font-light leading-relaxed text-gray-600">Đây là đoạn văn bản mẫu để minh họa cách sử dụng class typography trong Tailwind CSS.</p>
</div>

3. Thực hành Kết Hợp Spacing và Typography

• Tạo một thẻ thông báo đơn giản:

<div class="bg-blue-100 p-6 rounded-md">
  <h2 class="text-xl font-bold text-blue-800 mb-2">Thông báo</h2>
  <p class="text-base text-blue-600 leading-relaxed">Đây là nội dung thông báo quan trọng dành cho bạn.</p>
</div>

Kết Luận

Học viên đã học cách quản lý khoảng cách giữa các phần tử giao diện bằng padding, margin, gap và tối ưu văn bản với các class typography. Thực hành thường xuyên sẽ giúp bạn nắm vững kỹ năng thiết kế giao diện hiệu quả hơn trong Tailwind CSS.