Giới thiệu tw-prose

Chúng tôi rất vui mừng khi giới thiệu tw-prose — một cách triển khai chỉ CSS cho plugin Typography của Tailwind được xây dựng đặc biệt cho Tailwind CSS v4. Typography là trái tim của mỗi trang web tập trung vào nội dung, và tw-prose giúp bạn dễ dàng có được kiểu dáng văn bản thanh lịch, nhất quán — mà không cần bất kỳ phức tạp nào từ plugin.

Tại sao chọn tw-prose?

• ⚡ Nhẹ nhàng – không có JavaScript, không phức tạp plugin
• ✨ Mặc định đẹp – tiêu đề, đoạn văn, danh sách, khối mã, bảng, trích dẫn và nhiều hơn nữa
• 🌓 Sẵn sàng cho chế độ tối – chỉ cần thêm prose-invert
• 📏 Biến thể responsive – prose-sm, prose-lg, prose-xl, prose-2xl
• ✅ Tương thích với Tailwind v4

Cài đặt & Bắt đầu

Để cài đặt tw-prose, bạn chỉ cần chạy lệnh sau:

npm install tw-prose

Sau đó, bạn cần thêm vào tệp CSS của mình như sau:

@import "tailwindcss";
@import "tw-prose";

Sau đó, bạn có thể sử dụng nó trong HTML của mình với lớp prose:

<article class="prose">
  <h1>Xin chào, thế giới!</h1>
  <p>Typography trở nên đơn giản.</p>
</article>

Hoàn hảo cho

• Các blog và trang web nhiều nội dung
• Các dự án mà kích thước gói quan trọng
• Các nhóm muốn có typography không cần cấu hình ngay từ đầu

Bắt đầu ngay

tw-prose hiện đã có sẵn trên npm:
👉 npmjs.com/package/tw-prose

Hãy thử ngay hôm nay và làm cho văn bản của bạn nổi bật với kiểu dáng typography dễ dàng trong Tailwind CSS v4.

Thực tiễn tốt nhất

• Sử dụng các lớp prose để đảm bảo rằng mọi thành phần văn bản đều được định dạng nhất quán.
• Kiểm tra tài liệu Tailwind để biết thêm cách tùy chỉnh và mở rộng tw-prose cho nhu cầu cụ thể của bạn.

Những cạm bẫy phổ biến

• Không cấu hình đúng các lớp có thể dẫn đến kiểu dáng không đồng nhất trong thiết kế.
• Bỏ qua việc kiểm tra các biến thể responsive có thể làm giảm trải nghiệm người dùng trên các thiết bị khác nhau.

Mẹo hiệu suất

• Tối ưu hóa kích thước CSS bằng cách chỉ nhập các lớp cần thiết cho dự án của bạn.
• Sử dụng purge để loại bỏ các lớp không được sử dụng trong sản phẩm cuối cùng.

Khắc phục sự cố

• Nếu không thấy kiểu dáng nào áp dụng, hãy kiểm tra lại xem bạn đã thêm đúng @import vào tệp CSS của mình chưa.
• Đảm bảo rằng phiên bản Tailwind CSS của bạn tương thích với tw-prose.

Câu hỏi thường gặp

• tw-prose có hỗ trợ các tính năng nâng cao không?
  Có, bạn có thể tùy chỉnh các lớp và thêm các biến thể của riêng mình.
• Tôi có thể sử dụng tw-prose với các framework khác không?
  Có, miễn là bạn có Tailwind CSS được cài đặt.

Hy vọng rằng bài viết này sẽ giúp bạn bắt đầu với tw-prose dễ dàng hơn và tối ưu hóa việc sử dụng typography trong dự án của mình.