tailwind-design-system

Tổng quan

tailwind-design-system là gì?

tailwind-design-system là một kỹ năng thực tế để xây dựng hệ thống thiết kế có khả năng mở rộng, sẵn sàng cho sản xuất sử dụng Tailwind CSS v4. Nó tập trung vào cấu hình ưu tiên CSS, token thiết kế, biến thể thành phần, mẫu đáp ứng và khả năng truy cập. Kỹ năng này dành cho các nhà phát triển frontend, nhà thiết kế UI và các nhóm muốn chuẩn hóa mẫu giao diện hoặc chuyển đổi từ Tailwind v3 sang v4.

Ai nên sử dụng kỹ năng này?

• Các nhóm frontend tạo thư viện thành phần với Tailwind CSS v4
• Các nhà phát triển triển khai token thiết kế và chủ đề
• Nhà thiết kế UI xây dựng thành phần đáp ứng và có khả năng truy cập
• Các dự án chuẩn hóa mẫu giao diện trên nhiều codebase
• Các nhóm chuyển đổi từ Tailwind v3 sang v4

Kỹ năng này giải quyết vấn đề gì?

• Đơn giản hóa việc thiết lập hệ thống thiết kế có khả năng mở rộng
• Cung cấp hướng dẫn về các mẫu đặc thù v4 và chuyển đổi
• Giúp chuẩn hóa thành phần UI và token thiết kế
• Hỗ trợ các thực hành tốt về khả năng truy cập và thiết kế đáp ứng

Cách sử dụng

Các bước cài đặt

1. Cài đặt tailwind-design-system bằng lệnh:

   npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
   

2. Bắt đầu bằng cách xem qua tệp SKILL.md để hiểu quy trình tổng quan và các khái niệm chính.
3. Khám phá các tệp hỗ trợ:
   • README.md cho hướng dẫn sử dụng chung
   • AGENTS.md cho hướng dẫn dành riêng cho agent
   • metadata.json cho chi tiết cấu hình
   • references/advanced-patterns.md cho các mẫu nâng cao của Tailwind v4

Các tệp và thư mục chính

• SKILL.md: Quy trình chính và tổng quan
• references/advanced-patterns.md: Hướng dẫn nâng cao, bao gồm hoạt ảnh CSS gốc, chế độ tối, tiện ích tùy chỉnh và mẹo chuyển đổi
• references/: Các hướng dẫn và mẫu bổ sung

Điều chỉnh cho dự án của bạn

• Sử dụng kỹ năng như một mẫu cho kho lưu trữ và công cụ của riêng bạn
• Tùy chỉnh token thiết kế, biến thể thành phần và mẫu đáp ứng phù hợp với yêu cầu UI
• Tham khảo các mẫu nâng cao để triển khai hoạt ảnh và tính năng truy cập

Ví dụ: Các mẫu nâng cao của Tailwind v4

• Học cách sử dụng hoạt ảnh CSS gốc với @starting-style
• Triển khai chế độ tối bằng biến thể tùy chỉnh CSS
• Xây dựng hộp thoại và popover có khả năng truy cập với React và Radix UI

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

tailwind-design-system có tương thích với Tailwind v3 không?

Không, kỹ năng này được tối ưu cho Tailwind CSS v4. Với dự án v3, hãy tham khảo hướng dẫn nâng cấp chính thức.

Lợi ích chính khi sử dụng tailwind-design-system là gì?

• Tăng tốc tạo hệ thống thiết kế UI có khả năng mở rộng và nhất quán
• Cung cấp các mẫu cập nhật cho Tailwind v4, bao gồm chủ đề ưu tiên CSS và thiết kế đáp ứng
• Đưa ra ví dụ nâng cao về hoạt ảnh, khả năng truy cập và chế độ tối

Tôi có thể tìm ví dụ sử dụng nâng cao ở đâu?

Xem tệp references/advanced-patterns.md để có các mẫu mã chi tiết và danh sách kiểm tra chuyển đổi.

Làm sao để xem trước tất cả tài nguyên có sẵn?

Mở tab Files để kiểm tra toàn bộ cây thư mục, bao gồm các tham chiếu lồng nhau và script hỗ trợ. Điều này giúp bạn hiểu cấu trúc kỹ năng và điều chỉnh cho quy trình làm việc của mình.

Khi nào tailwind-design-system không phù hợp?

Nếu dự án của bạn dùng framework CSS khác hoặc chưa sẵn sàng chuyển sang Tailwind v4, kỹ năng này có thể không phù hợp. Nó tập trung vào các mẫu và quy trình đặc thù của Tailwind v4.