Mục lục nội dung

Giới thiệu

Tailwind CSS cung cấp một tập hợp phong phú các lớp utility, cho phép bạn xây dựng giao diện nhanh chóng mà không cần viết CSS tùy chỉnh. Tuy nhiên, khi dự án mở rộng, việc duy trì độ nhất quán về khoảng cách (spacing) và kích thước chữ (typography) trở thành thách thức. Bài viết này sẽ hướng dẫn cách cấu hình và sử dụng Tailwind để tạo một hệ thống spacing và typography nhất quán, giúp giảm thiểu việc lặp lại mã và cải thiện khả năng bảo trì.

Thiết lập cấu hình spacing và typography trong tailwind.config.js

Thay vì sử dụng các giá trị mặc định như mt-4 hay text-lg một cách rải rác, bạn có thể mở rộng theme để định nghĩa các token phù hợp với thiết kế hệ thống của mình. Điều này cho phép mọi thành viên trong team chỉ cần nhớ một vài tên token thay vì các giá trị pixel cụ thể.

module.exports = {
  theme: {
    extend: {
      spacing: {
        '72': '18rem',
        '84': '21rem',
        '96': '24rem'
      },
      fontSize: {
        'xs': ['0.75rem', { lineHeight: '1rem' }],
        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
        'base': ['1rem', { lineHeight: '1.5rem' }],
        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
        '2xl': ['1.5rem', { lineHeight: '2rem' }],
        '3xl': ['1.875rem', { lineHeight: '2.25rem' }]
      }
    }
  },
  plugins: []
};

Trong đoạn cấu hình trên, chúng ta thêm ba mức spacing mới (72, 84, 96) và mở rộng các kích thước chữ với tên ngắn gọn. Khi sử dụng, chỉ cần gọi mt-72 hoặc text-2xl để áp dụng.

Sử dụng theme() trong CSS tùy chỉnh

Nếu dự án vẫn cần một số quy tắc CSS riêng, Tailwind cho phép truy cập các giá trị theme thông qua hàm theme() trong file @layer utilities. Ví dụ:

@layer utilities {
  .btn-primary {
    @apply bg-indigo-600 text-white font-medium py-2 px-4 rounded;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
}

Áp dụng các lớp utility để duy trì độ nhất quán

Khi đã có token spacing và typography, việc xây dựng các component UI trở nên nhất quán hơn. Thay vì viết mt-4 mb-2 ở mỗi nơi, bạn có thể tạo một lớp utility riêng cho phần margin chung, ví dụ .my-section với my-8. Điều này giảm thiểu lỗi khi thay đổi thiết kế trong tương lai.

Ví dụ thực tế: Card component

Dưới đây là một component Card được xây dựng hoàn toàn bằng các lớp Tailwind, sử dụng các token spacing và typography đã định nghĩa ở trên.

<div class="max-w-sm rounded overflow-hidden shadow-lg p-6 bg-white">
  <img class="w-full h-48 object-cover mb-4" src="..." alt="Image">
  <h3 class="text-xl font-semibold mb-2">Tiêu đề</h3>
  <p class="text-gray-600 text-base">Mô tả ngắn gọn về nội dung của thẻ card, sử dụng kích thước chữ text-base để giữ độ nhất quán.</p>
  <a href="#" class="mt-4 inline-block text-indigo-600 hover:text-indigo-800">Đọc thêm</a>
</div>

Nhờ việc sử dụng các lớp p-6, mb-4, text-xl và text-base, chúng ta đã tạo ra một card có khoảng cách và kiểu chữ đồng nhất mà không cần viết CSS riêng.

Kết luận

Việc định nghĩa một hệ thống spacing và typography trong tailwind.config.js không chỉ giúp giảm thiểu việc lặp lại mã mà còn tạo ra một ngôn ngữ thiết kế chung cho toàn bộ dự án. Khi kết hợp với các lớp utility tùy chỉnh, bạn có thể xây dựng các component linh hoạt, dễ bảo trì và đáp ứng nhanh các thay đổi UI.

Để nắm vững cách áp dụng Tailwind CSS trong các dự án thực tế, bạn có thể Tham khảo khóa học "Tailwind CSS - CSS Framework xây dựng UI siêu tốc" tại đây.