Tài liệu
Tài liệu về Frutjam — cài đặt, cấu hình, chủ đề, màu sắc và kiểu chữ. Tailwind CSS v4 chỉ có CSS, không có JavaScript, có thể truy cập WCAG AA. Hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Những tài liệu này bao gồm mọi thứ bạn cần để có được từ dự án Tailwind CSS v4 mới đến giao diện người dùng có đầy đủ chủ đề, dễ tiếp cận. Bắt đầu với Installation — hai dòng CSS — sau đó khám phá cách hệ thống tạo chủ đề hoạt động bằng cách sử dụng các biến CSS và một thuộc tính data-theme duy nhất. Hệ thống màu sử dụng mã thông báo OKLCH ngữ nghĩa tự động đáp ứng tỷ lệ tương phản WCAG AA mà không cần kiểm tra màu thủ công. Các tùy chọn cấu hình cho phép bạn xác định phạm vi mã thông báo, thêm tiền tố để tránh xung đột hoặc chỉ chọn những thành phần bạn cần để giữ cho đầu ra CSS của bạn luôn gọn gàng.
Màu sắc
Hệ thống màu của Frutjam sử dụng mã thông báo CSS ngữ nghĩa được thiết kế để đáp ứng tỷ lệ tương phản WCAG AA ngay lập tức. Không có JavaScript, nhận biết chế độ tối, tương thích với Tailwind CSS v4. Hoạt động với Django, HTMX, Laravel và mọi ngăn xếp chỉ có CSS.
Tổng quan
Frutjam là thư viện giao diện người dùng Tailwind CSS v4 miễn phí chỉ dành cho CSS. Không có JavaScript, WCAG AA/AAA có thể truy cập được, không phụ thuộc vào khung. Xây dựng giao diện hiện đại với các thành phần ngữ nghĩa hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.
Chủ đề
Hệ thống tạo chủ đề chỉ CSS của Frutjam sử dụng các biến CSS và một thuộc tính dữ liệu duy nhất. Chuyển đổi chủ đề sáng, tối và tùy chỉnh mà không cần JavaScript. Mã thông báo màu WCAG AA được tích hợp sẵn, hoạt động với Django, HTMX, Laravel và bất kỳ dự án Tailwind CSS v4 nào.
Cài đặt
Cài đặt Frutjam, thư viện giao diện người dùng CSS Tailwind chỉ dành cho CSS, trong vài phút. Hai thành phần nhập, không có JavaScript, WCAG có thể truy cập được ngay lập tức. Hoạt động với Django, HTMX, Laravel, React và bất kỳ dự án Tailwind CSS v4 nào.
Cấu hình
Định cấu hình plugin Tailwind CSS chỉ dành cho CSS của Frutjam. Đặt chủ đề mặc định, xác định mã thông báo màu tùy chỉnh, chuyển đổi hệ thống tiền tố - không cần JavaScript. Các mặc định có thể truy cập WCAG, hoạt động với Django, HTMX, Laravel và bất kỳ khung nào.
kiểu chữ
Hệ thống kiểu chữ chỉ CSS của Frutjam. Chia tỷ lệ văn bản HTML ngữ nghĩa bằng Tailwind CSS v4, có thể truy cập WCAG, không cần JavaScript. Hoạt động với Django, HTMX, Laravel, React và bất kỳ framework nào.
Bắt đầu từ đâu
Bạn mới sử dụng Frutjam? Đi theo con đường này để đi từ con số 0 đến dự án Tailwind CSS v4 có đầy đủ chủ đề và dễ tiếp cận.
- 1Cài đặt
Cài đặt gói npm và thêm hai dòng vào CSS của bạn. Không có cấu hình JavaScript, không có plugin PostCSS.
- 2Tổng quan
Hiểu cách Frutjam hoạt động cùng với các tiện ích CSS của Tailwind, các lớp thành phần ngữ nghĩa và mã thông báo màu WCAG AA.
- 3Chủ đề
Áp dụng một chủ đề có sẵn hoặc xây dựng chủ đề của riêng bạn bằng các biến CSS và một thuộc tính
data-themeduy nhất. - 4Colors
Tìm hiểu cách hoạt động của mã thông báo màu ngữ nghĩa và cách mọi cặp
on-{color}tự động đảm bảo độ tương phản WCAG AA. - 5Cấu hình
Đặt tiền tố, mã thông báo phạm vi cho phần tử gốc, thành phần chọn anh đào hoặc tích hợp cùng với một khung CSS khác.
Câu hỏi thường gặp
Frutjam có yêu cầu Tailwind CSS v4 không?
Có — Frutjam được xây dựng cho Tailwind CSS v4 và sử dụng lệnh @plugin được giới thiệu trong v4. Nó không tương thích với Tailwind CSS v3. Nếu bạn vẫn đang dùng v3, trước tiên hãy nâng cấp lên v4 bằng cách sử dụng hướng dẫn di chuyển Tailwind chính thức.
Frutjam có miễn phí và là nguồn mở không?
Có - thư viện thành phần cốt lõi của Frutjam là nguồn mở và miễn phí (được MIT cấp phép). Các gói Pro và Team bổ sung thêm các khối, mẫu giao diện người dùng cao cấp và yêu cầu Cherry MCP không giới hạn để tích hợp trình chỉnh sửa AI.