Linh kiện
Các thành phần CSS Tailwind miễn phí chỉ dành cho CSS có khả năng truy cập WCAG AA/AAA được tích hợp sẵn. Không cần JavaScript, không phụ thuộc vào khung và tương thích với Django, HTMX, Laravel, React, Vue và bất kỳ ngăn xếp nào. Sẵn sàng để sử dụng và dễ dàng tùy chỉnh.
Frutjam cung cấp hơn 52 thành phần CSS Tailwind chỉ có CSS — nút, phương thức, biểu mẫu, điều hướng, hiển thị dữ liệu, v.v. — được xây dựng cho Tailwind CSS v4. Mọi thành phần đều sử dụng tên lớp ngữ nghĩa (.btn, .card, .badge) hoạt động cùng với mọi lớp tiện ích Tailwind. Không có gói JavaScript, không cần ngữ cảnh React và không cần plugin PostCSS ngoài chính Tailwind. Mọi thành phần đều có sẵn WCAG AA ngay lập tức, với các cặp màu OKLCH được điều chỉnh bằng tay đảm bảo độ tương phản có thể đọc được trên mọi bề mặt. Vì Frutjam chỉ dành cho CSS và không phụ thuộc vào khung, nên đánh dấu HTML tương tự hoạt động trong các mẫu Django, phản hồi HTMX, Laravel Blade, Rails ERB, React JSX hoặc HTML tĩnh đơn giản — mà không cần sửa đổi.
Bạn mới sử dụng Frutjam?
Bắt đầu sau vài giây — hai lần nhập và bạn đã sẵn sàng xây dựng.
Đàn xếp
Accordion CSS Tailwind chỉ dành cho CSS sử dụng `<details>`/`<summary>` gốc. Mở rộng và thu gọn các phần nội dung không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Báo động
Cảnh báo CSS Tailwind chỉ dành cho CSS với các biến thể thông tin, thành công, cảnh báo và lỗi. Phong cách mềm mại, khe cắm biểu tượng và hoa văn có thể loại bỏ. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Hình đại diện
Hình đại diện CSS Tailwind chỉ có CSS cho hình ảnh hồ sơ. Kích thước xs-xl, xếp chồng nhóm và chỉ báo trạng thái trực tuyến/ngoại tuyến. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Huy hiệu
Huy hiệu CSS Tailwind chỉ dành cho CSS với các biến thể chính, phụ, trọng âm, thông tin, thành công, cảnh báo và lỗi. Kiểu dáng mềm mại, phác thảo và ma quái, kích thước xs-lg. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
vụn bánh mì
Điều hướng đường dẫn CSS Tailwind chỉ có CSS với các dấu phân cách tùy chỉnh và đánh dấu mốc có thể truy cập. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
Cái nút
Nút CSS Tailwind chỉ có CSS với các biến thể chính, phụ, dấu, bóng, đường viền và mềm. Kích thước xs-xl, trạng thái tải, nút tắt và biểu tượng. Chỉ CSS, WCAG AA, hoạt động với Django, HTMX, Laravel, React.
Thẻ
Thẻ CSS Tailwind chỉ có CSS với các kiểu đường viền, bóng và phẳng. Kích thước nhỏ gọn, mặc định và lớn. Khe cắm nội dung thẻ, tiêu đề thẻ, chân trang thẻ. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
băng chuyền
Băng chuyền CSS Tailwind chỉ dành cho CSS sử dụng tính năng cuộn-snap. Bố cục trượt ngang với các điều khiển điều hướng và không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Trò chuyện
Thành phần bong bóng trò chuyện CSS Tailwind chỉ có CSS. Vị trí bắt đầu và kết thúc cho tin nhắn đã gửi và nhận, có hình đại diện và dấu thời gian. WCAG AA, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Hộp kiểm
Hộp kiểm CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl, trạng thái không xác định. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Có thể thu gọn
Bảng điều khiển có thể thu gọn CSS Tailwind chỉ bằng CSS sử dụng phần tử `<details>` gốc. Hiển thị và ẩn các phần nội dung không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Hộp tổ hợp
Hộp tổ hợp CSS Tailwind chỉ có CSS với tính năng lọc tìm kiếm trực tiếp và danh sách thả xuống có thể truy cập. Điều hướng bàn phím, các biến thể màu sắc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Đếm ngược
Đồng hồ đếm ngược CSS Tailwind chỉ dành cho CSS. Hiển thị số hoạt hình cho ngày, giờ, phút và giây. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Khác biệt
Trình xem khác biệt CSS Tailwind chỉ dành cho CSS để so sánh nội dung song song với dải phân cách có thể kéo được. Không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Dải phân cách
Bộ chia CSS Tailwind chỉ dành cho CSS — ngang và dọc với nhãn ở giữa tùy chọn. Các biến thể màu sắc và kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
ngăn kéo
Ngăn CSS Tailwind chỉ dành cho CSS sử dụng nút chuyển đổi hộp kiểm gốc. Bảng điều khiển bên trượt để điều hướng hoặc bộ lọc không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Chân trang
Chân trang CSS Tailwind chỉ có CSS với bố cục nhiều cột, logo, liên kết và vùng bản quyền. WCAG AA có thể truy cập, hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
tiêu đề
Tiêu đề trang CSS Tailwind chỉ có CSS — bố cục thanh trên cùng với các vị trí thương hiệu, điều hướng và hành động. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
anh hùng
Phần CSS CSS Tailwind chỉ dành cho CSS dành cho trang đích. Bố cục toàn chiều rộng với tiêu đề, mô tả và CTA ở giữa. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Chỉ số
Chỉ báo CSS Tailwind chỉ có CSS để phủ các huy hiệu hoặc dấu chấm trên bất kỳ góc thành phần nào. Các biến thể màu sắc và định vị. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
đầu vào
Đầu vào CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl, khe cắm tiền tố và hậu tố, kiểu ghost. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Tham gia
CSS Tailwind chỉ có CSS tham gia để nhóm các nút, đầu vào hoặc lựa chọn vào một thiết bị được kết nối. Ngang và dọc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
KBD
Thành phần kbd CSS Tailwind chỉ có CSS để hiển thị các phím tắt và tổ hợp phím. Các biến thể kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
liên kết
Liên kết CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, nhấn và trung tính. Di chuột gạch chân và phong cách đơn giản. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Đang tải
Chỉ báo tải CSS Tailwind chỉ dành cho CSS với các hoạt ảnh xoay tròn, dấu chấm, vòng và thanh. Các biến thể về màu sắc và kích thước, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
vùng chọn
Vùng chọn CSS Tailwind chỉ dành cho CSS dành cho nội dung và biểu tượng cuộn theo chiều ngang. Kiểm soát tốc độ và hướng thông qua CSS, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Mặt nạ
Mặt nạ CSS Tailwind chỉ dành cho CSS để cắt hình ảnh thành các hình dạng — hình tròn, hình tròn, trái tim, hình lục giác, v.v. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Thực đơn
Menu dọc CSS Tailwind chỉ có CSS cho danh sách điều hướng. Trạng thái mục đang hoạt động, bị vô hiệu hóa và biểu tượng. Các biến thể kích thước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
phương thức
Phương thức CSS Tailwind chỉ dành cho CSS sử dụng phần tử `<dialog>` gốc. Kích thước đáp ứng, phông nền và bẫy lấy nét. Không có JavaScript để sử dụng cơ bản. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Thanh điều hướng
Thanh điều hướng CSS Tailwind chỉ có CSS với thương hiệu, liên kết điều hướng và vùng hành động. Các biến thể dính và trong suốt. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Phân trang
Phân trang CSS Tailwind chỉ bằng CSS cho các trang được đánh số, mũi tên trước/tiếp theo, khoảng trống dấu chấm lửng, đầu vào radio có thể truy cập và lựa chọn nhảy trang. Không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Cửa sổ bật lên
Cửa sổ bật lên CSS Tailwind chỉ dành cho CSS bằng cách sử dụng API cửa sổ bật lên gốc. Bảng nội dung nổi dành cho chú giải công cụ và menu thả xuống. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Tiến triển
Thanh tiến trình CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Tiến độ xuyên tâm
Tiến trình xuyên tâm CSS Tailwind chỉ dành cho CSS — vòng tiến trình hình tròn có hiển thị phần trăm. Các biến thể màu sắc và kích thước, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Radio
Các nút radio CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, trọng âm và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Phạm vi
Thanh trượt phạm vi CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Đánh giá
Thành phần xếp hạng tim và sao CSS Tailwind chỉ có CSS. Kích thước xs-xl, hỗ trợ nửa sao, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Lựa chọn
Danh sách thả xuống CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Size xs-xl, kiểu ma quái. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Thanh bên
Thanh bên CSS Tailwind chỉ có CSS cho bảng điều hướng bên. Có thể thu gọn, với trạng thái mục điều hướng và tiêu đề phần. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Bộ xương
Trình tải khung CSS Tailwind chỉ có CSS cho giao diện người dùng giữ chỗ. Hình dạng hình tròn, hình chữ nhật và dòng văn bản với hoạt ảnh xung. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Thống kê
Chỉ số CSS Tailwind chỉ dành cho CSS để hiển thị số liệu. Các khe giá trị, nhãn, mô tả và biểu tượng. Bố trí lưới đáp ứng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Trạng thái
Chỉ báo dấu chấm trạng thái CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, thành công, cảnh báo và lỗi. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
bước
Các bước CSS Tailwind chỉ dành cho CSS dành cho trình hướng dẫn nhiều bước và chỉ báo tiến trình. Bố cục ngang và dọc, các biến thể màu sắc trên mỗi bước. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Bề mặt
Bề mặt CSS Tailwind chỉ có CSS để áp dụng màu nền và màu văn bản theo chủ đề cho vùng chứa. Tất cả các biến thể màu sắc. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Tráo đổi
Trao đổi CSS Tailwind chỉ dành cho CSS để chuyển đổi giữa hai phần tử. Lật, xoay và làm mờ hình ảnh động, không có JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Bàn
Bảng CSS Tailwind chỉ dành cho CSS có sọc vằn, kích thước nhỏ gọn và mặc định, các cột được ghim và trạng thái di chuột của hàng. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Tab
Các tab CSS Tailwind chỉ có CSS với các biến thể kiểu đường viền, nâng lên, đóng hộp và hình viên thuốc. Trạng thái và kích thước hoạt động, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Nhãn
Thẻ (chip) Tailwind CSS chỉ có CSS với các biến thể màu sắc, kiểu dáng mềm mại và nút có thể tháo rời. Kích thước xs-lg. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Vùng văn bản
Vùng văn bản CSS Tailwind chỉ có CSS với các biến thể màu chính, phụ, dấu và ngữ nghĩa. Size xs-xl, kiểu ma quái. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Dòng thời gian
Dòng thời gian CSS Tailwind chỉ có CSS cho danh sách sự kiện theo trình tự thời gian. Bố cục dọc với các khe cắm biểu tượng, nội dung và đường kết nối. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Nướng
Bản tóm tắt CSS Tailwind chỉ dành cho CSS để định vị thông báo — vị trí trên cùng, dưới cùng, bắt đầu, kết thúc và ở giữa. Không có JavaScript cho bố cục. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Chuyển đổi
Công tắc chuyển đổi CSS Tailwind chỉ dành cho CSS với các biến thể màu chính, phụ, nhấn và ngữ nghĩa. Kích thước xs-xl. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Chú giải công cụ
Chú giải công cụ CSS Tailwind chỉ dành cho CSS với các vị trí trên cùng, dưới cùng, bên trái và bên phải. Các biến thể màu sắc, không cần JavaScript. WCAG AA có thể truy cập được, hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Câu hỏi thường gặp
Có phải tất cả các thành phần của Frutjam đều chỉ có CSS không?
Có - phần lớn các thành phần là CSS thuần túy không có JavaScript. Các nút, huy hiệu, thẻ, biểu mẫu, cảnh báo, phương thức, ngăn kéo, tab, v.v., tất cả đều hoạt động với HTML và CSS đơn giản. Một số ít thành phần không có HTML gốc tương đương (định vị bánh mì nướng, lọc hộp tổ hợp, điều khiển băng chuyền) cung cấp các trình trợ giúp JS nhẹ tùy chọn, nhưng bố cục và kiểu dáng CSS hoàn toàn không yêu cầu JavaScript.
Các thành phần Frutjam có hoạt động với Django, HTMX và Laravel không?
Có - Frutjam không phụ thuộc vào khuôn khổ. Vì mọi thành phần chỉ có CSS nên nó hoạt động với mọi ngăn xếp do máy chủ kết xuất. Các mẫu Django, HTMX, Laravel Blade, Rails ERB, HTML đơn giản - nếu bạn có thể xuất HTML, Frutjam sẽ hoạt động. Không có React, không có đường dẫn xây dựng, không cần khung JavaScript.
Các thành phần WCAG có thể truy cập được không?
Có — Độ tương phản WCAG AA được đảm bảo trên mọi thành phần. Mỗi cặp màu (--color-primary / --color-on-primary, v.v.) đều được điều chỉnh bằng tay trong OKLCH để đáp ứng các yêu cầu về độ tương phản WCAG AA. Các phần tử HTML ngữ nghĩa được sử dụng xuyên suốt — <dialog> gốc cho các phương thức, <details> cho đàn accordion và các thuộc tính ARIA thích hợp nếu cần.
Các thành phần của Frutjam so với DaisyUI như thế nào?
Cả hai đều là thư viện thành phần Tailwind CSS chỉ dành cho CSS, nhưng Frutjam được xây dựng riêng cho Tailwind CSS v4, sử dụng mã thông báo màu OKLCH với các cặp độ tương phản WCAG AA được đảm bảo và cung cấp máy chủ MCP (Cherry) miễn phí để tích hợp trình chỉnh sửa AI — tương đương với DaisyUI (Blueprint) được trả phí. Frutjam cũng cung cấp các cặp mã thông báo on-{color} rõ ràng thay vì tính toán màu nền trước khi chạy.
Tôi có cần cài đặt bất cứ thứ gì ngoài CSS Tailwind không?
Chỉ cần thêm một dòng. Thêm @plugin "frutjam"; vào tệp CSS của bạn sau @import "tailwindcss"; và cài đặt qua npm i -D frutjam. Chỉ vậy thôi — không có plugin PostCSS, không có cấu hình JavaScript, không có biểu định kiểu riêng để nhập. Tất cả các thành phần đều có sẵn ngay lập tức và được Tailwind tự động rung lên.
Tôi có thể sử dụng các thành phần Frutjam với React hoặc Next.js không?
Đúng. Vì Frutjam chỉ có CSS nên bạn sử dụng các thành phần theo cách giống nhau trong bất kỳ ngăn xếp nào — chỉ cần áp dụng tên lớp. Đối với một số thành phần được hưởng lợi từ điều khiển JavaScript (mở/đóng phương thức, bánh mì nướng, băng chuyền), Frutjam cung cấp các hook React tùy chọn (frutjam/react) để bao bọc các lệnh gọi DOM gốc mà không có phần phụ thuộc bổ sung.