Giới thiệu

TailwindCSS là một framework CSS phổ biến giúp lập trình viên nhanh chóng thiết kế giao diện người dùng mà không cần viết nhiều mã CSS tùy chỉnh. Mặc dù nhiều người chỉ sử dụng các chức năng cơ bản như flex, grid, khoảng cách và màu sắc, nhưng Tailwind còn ẩn chứa nhiều tính năng cực kỳ hữu ích khác có thể tiết kiệm thời gian và công sức cho bạn.

Trong bài viết này, chúng ta sẽ khám phá 4 tính năng của TailwindCSS mà có thể bạn chưa biết đến, cùng với một bản demo để bạn có thể thử nghiệm ngay lập tức!

👉 Link đến Playground

1. group & peer: Định dạng Mà Không Cần JavaScript

Bạn có muốn hiển thị một nút khi di chuột qua? Hoặc mở rộng một phần khi checkbox được chọn? Thông thường, bạn sẽ cần JavaScript. Nhưng với group và peer, bạn không cần phải làm vậy.

Ví dụ về Hover Card (group)

<div class="group border rounded-xl p-4 bg-white shadow hover:shadow-md">
  <div class="flex justify-between">
    <p class="font-medium">Dự án Alpha</p>
    <svg class="h-4 w-4 transition-transform group-hover:translate-x-1" viewBox="0 0 20 20" fill="currentColor"><path d="M7 5l5 5-5 5"/></svg>
  </div>
  <button class="mt-3 opacity-0 group-hover:opacity-100 transition text-sm text-indigo-600 underline">
    Mở
  </button>
</div>

Ví dụ về Accordion (peer)

<input id="faq" type="checkbox" class="peer hidden">
<label for="faq" class="flex justify-between cursor-pointer">
  <span>Cái gì là Alpha?</span>
  <svg class="h-4 w-4 transition peer-checked:rotate-180" viewBox="0 0 20 20" fill="currentColor"><path d="M5 8l5 5 5-5"/></svg>
</label>
<div class="grid grid-rows-[0fr] peer-checked:grid-rows-[1fr] transition-all">
  <div class="overflow-hidden text-sm mt-2">Không cần JS. Chỉ cần peer-checked ✨</div>
</div>

👉 Rất hoàn hảo cho thẻ, FAQ, menu — tất cả mà không cần viết một dòng JavaScript nào.

2. prose: Một Lớp Để Định Dạng Typography Cho Blog

Bạn đã bao giờ đưa một đoạn văn dài vào trang web và nghĩ rằng “trông thật tệ”?
Đó là lúc prose từ plugin typography phát huy tác dụng.

<article class="prose prose-slate bg-white p-6 rounded-xl border shadow">
  <h1>Thiết kế Giao Diện Bình Tĩnh</h1>
  <p><strong>Thiết kế bình tĩnh</strong> có nghĩa là ít tiếng ồn và phân cấp rõ ràng.</p>
  <h2>Danh sách kiểm tra</h2>
  <ul>
    <li>Một hành động rõ ràng cho mỗi màn hình</li>
    <li>Sử dụng không gian, không sử dụng đường biên</li>
    <li>Để màu sắc có ý nghĩa</li>
  </ul>
</article>

3. line-clamp: Kiểm Soát Tràn Văn Bản Một Cách Thời Trang

Các thẻ sản phẩm, bản xem trước blog, feed tin tức — tất cả đều cần cắt bớt văn bản. Ngừng viết CSS tùy chỉnh, Tailwind đã hỗ trợ bạn.

<article class="border rounded-xl p-4 bg-white">
  <h3 class="font-semibold line-clamp-1">Giảm tỷ lệ hủy với onboarding tốt hơn</h3>
  <p class="text-sm text-slate-600 line-clamp-2 mt-1">
    Chúng tôi đã thiết kế lại phiên đầu tiên với các mặc định tốt hơn, tiết lộ dần dần,
    và ít mệt mỏi trong việc ra quyết định. Kết quả? Tỷ lệ hủy giảm đáng kể.
  </p>
</article>

👉 Tiêu đề của bạn không bao giờ bị quấn quá dài, mô tả của bạn không bao giờ làm thẻ bị tràn. Sạch sẽ và được kiểm soát.

4. Giá Trị & Biến Thể Tùy Chọn: Những Siêu Năng Lực Nhỏ

Đôi khi bạn chỉ cần một kích thước chính xác hoặc muốn định dạng chỉ một phần tử cụ thể khi di chuột. Tailwind cho phép bạn phá vỡ các quy tắc với dấu ngoặc vuông.

Kích thước chính xác

<div class="h-[36px] w-[36px] rounded-lg bg-gradient-to-br from-indigo-300 to-indigo-600"></div>

Định dạng phần tử con khi di chuột

<button class="flex items-center gap-2 hover:[&>svg]:translate-x-1">
  Mở báo cáo
  <svg class="h-4 w-4 transition" viewBox="0 0 20 20" fill="currentColor"><path d="M7 5l5 5-5 5"/></svg>
</button>

👉 Rất tiện lợi cho các nguyên mẫu, tương tác nhỏ và những điều chỉnh “chỉ một pixel thêm”.

Kết Luận

Tailwind là nhiều hơn là chỉ tiện ích khoảng cách. Các tính năng như group, peer, prose, line-clamp và các biến thể tùy chọn là những công cụ “ồ wow” giúp bạn làm việc nhanh hơn và giao diện người dùng của bạn sạch hơn.

Lần tới khi bạn định viết CSS tùy chỉnh, hãy hỏi: “Có phải Tailwind có thể làm điều này không?”
Có khả năng — đúng, nó có thể.

Câu Hỏi Thường Gặp

TailwindCSS có phải là một framework CSS tốt không?

Có, TailwindCSS giúp tối ưu hóa quy trình phát triển giao diện người dùng và tiết kiệm thời gian viết mã.

Tôi có thể sử dụng TailwindCSS cho dự án của mình không?

Chắc chắn rồi! TailwindCSS phù hợp cho mọi loại dự án từ nhỏ đến lớn.

Làm thế nào để tôi bắt đầu với TailwindCSS?

Bạn có thể cài đặt TailwindCSS thông qua npm hoặc thông qua CDN để bắt đầu sử dụng ngay.

Liệu tôi có cần học JavaScript để sử dụng TailwindCSS không?

Không, bạn có thể sử dụng TailwindCSS mà không cần viết JavaScript, nhưng việc hiểu JavaScript sẽ giúp bạn tận dụng tốt hơn các tính năng của nó.

Xem ngay bản demo tại đây để trải nghiệm những tính năng tuyệt vời của TailwindCSS!