Twind
Giải pháp Tailwind-in-JS nhỏ nhất, nhanh nhất và đầy đủ tính năng nhất có thể có
Twind là một trình biên dịch nhỏ chuyển đổi các lớp tiện ích thành CSS tại thời gian chạy. Mục tiêu của dự án này là kết hợp tính linh hoạt của CSS-in-JS với các ràng buộc được xem xét cẩn thận của API Tailwind.
CSS ưu tiên tiện ích mà không cần bất kỳ bước xây dựng nào ngay trong trình duyệt hoặc bất kỳ môi trường nào khác như Node.js, deno, workers, …
- 📖 Nghiên cứu the documentation
- 🤖 Thử the playground
- 🧭 Khám phá the examples
- 📓 Tham khảo the API reference
- 📜 Đọc the changelog
Ngày 18 tháng 11, 2022: Twind v1 hiện đã có bản phát hành ổn định!
Xem Migration Guide để nâng cấp hoặc điều hướng đến v0.16 branch.
✨ Tính năng
⚡️ Không cần bước xây dựng
Nhận tất cả lợi ích của Tailwind mà không cần Tailwind, PostCSS, cấu hình, lọc, hoặc tự động thêm tiền tố.
🚀 Khung làm việc không phụ thuộc
Nếu ứng dụng của bạn sử dụng HTML và JavaScript, nó nên hoạt động với Twind. Điều này cũng áp dụng đối với các ứng dụng được phục vụ bởi máy chủ.
😎 Một mức giá cố định thấp
Twind cung cấp trình biên dịch, không phải CSS. Điều này có nghĩa là có vô hạn kiểu dáng và biến thể với một mức giá cố định thấp.
Các tính năng khác
- 🌎 Không cần trình đóng gói: Có thể sử dụng qua CDN
- 🎨 Tích hợp hoàn hảo với Tailwind
- 🤝 Tính năng tương đương với Tailwind v3
- 🎯 Biến thể, quy tắc và cú pháp mở rộng
- 🚓 Lối thoát cho CSS tùy ý
- 🤖 Hỗ trợ tích hợp sẵn cho việc kết hợp quy tắc có điều kiện
- 🧐 Tăng khả năng đọc bằng kiểu dáng đa dòng và bình luận
- ❄️ Tùy chọn băm tên lớp để đảm bảo không xung đột
- 🔩 Linh hoạt: chủ đề có thể cấu hình, quy tắc và biến thể
- 🔌 Mở rộng ngôn ngữ thông qua bộ cài đặt trước
- 🎩 Không có chi phí thời gian chạy với việc trích xuất tĩnh
- 🚅 Nhanh hơn hầu hết các thư viện CSS-in-JS
- ⚡ Hoàn toàn có thể tách cây: Chỉ lấy những gì bạn muốn
- 🦾 Mạnh mẽ về loại: Được viết bằng Typescript
- và nhiều hơn nữa!
📖 Tài liệu
Toàn bộ tài liệu có sẵn tại twind.style.
💬 Cộng đồng
Để được trợ giúp, thảo luận về các thực tiễn tốt nhất hoặc bất kỳ cuộc trò chuyện nào khác có lợi từ việc tìm kiếm, vui lòng sử dụng Github Discussions.
Để đặt câu hỏi và thảo luận với các người dùng Twind khác trong thời gian thực, vui lòng sử dụng Discord Chat.
🧱 Đóng góp
Xem Hướng dẫn Đóng góp để biết thông tin về cách đóng góp cho dự án này.
🌸 Công đồng
💡 Inspirations
Không đúng khi cho rằng thiết kế ở đây hoàn toàn mang tính độc đáo. Ngoại trừ những nỗ lực ban đầu của các nhà sáng lập để triển khai một mô-đun như vậy (oceanwind và beamwind), chúng ta thực sự đứng trên vai những người khổng lồ.
- Tailwind CSS: đã tạo ra một API được suy nghĩ cẩn thận, qua đó ngữ pháp của trình biên dịch được định nghĩa.
- styled-components: đã triển khai và phổ biến các lợi ích của việc thực hiện CSS-in-JS.
- htm: một trình biên dịch JSX đã chứng minh rằng việc biên dịch thời gian chạy của DSLs như JSX có giá trị.
- goober: một trình thực hiện CSS-in-JS không thể tưởng nhỏ nhất nhưng hiệu quả, định nghĩa các tính năng mô-đun quan trọng.
- otion: giải pháp CSS-in-JS đầu tiên được hướng dẫn cụ thể xử lý CSS một cách nguyên tử.
- clsx: một tiện ích nhỏ cho việc xây dựng chuỗi tên lớp một cách có điều kiện.
- style-vendorizer: các trợ giúp tiền tố CSS thiết yếu trong ít hơn 1KB JavaScript.
- UnoCSS: cho cú pháp cấu hình.
- CSSType: cung cấp tự động hoàn thành và kiểm tra kiểu cho các thuộc tính và giá trị CSS.
🤝 Những người đóng góp
Cảm ơn tất cả những người đã already contributed đối với twind!
🙏🏾 Nhà tài trợ
Dự án này được tài trợ tử tế bởi Kenoxa GmbH người hỗ trợ @sastan duy trì dự án này như một phần của cam kết mã nguồn mở của họ.
COPILOT TRAVEL đang hợp tác với @sastan để duy trì twind phù hợp với các phiên bản mới nhất của Tailwind CSS.
Cảm ơn tất cả nhà tài trợ của chúng tôi
Vui lòng yêu cầu công ty của bạn cũng hỗ trợ dự án mã nguồn mở này bằng cách trở thành nhà tài trợ trên opencollective hoặc GitHub.
Chi tiết tải về:
Tác giả: tw-in-js
Nguồn: https://github.com/tw-in-js/twind
Giấy phép: MIT license
