Dokumenty
Dokumentacja Frutjam — instalacja, konfiguracja, motywy, kolory i typografia. Tylko CSS Tailwind CSS v4, zero JavaScript, dostępny WCAG AA. Współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.
Te dokumenty obejmują wszystko, czego potrzebujesz, aby przejść od świeżego projektu Tailwind CSS v4 do w pełni tematycznego, dostępnego interfejsu użytkownika. Zacznij od Installation — dwóch linijek CSS — a następnie sprawdź, jak działa system motywów, używając zmiennych CSS i pojedynczego atrybutu data-theme. System kolorów wykorzystuje semantyczne tokeny OKLCH, które automatycznie spełniają współczynniki kontrastu WCAG AA i nie wymagają ręcznego sprawdzania kolorów. Opcje konfiguracyjne pozwalają określić zakres tokenów, dodać prefiks, aby uniknąć konfliktów, lub wybrać tylko te komponenty, których potrzebujesz, aby Twoje wyniki CSS były oszczędne.
Zabarwienie
System kolorów Frutjam wykorzystuje semantyczne tokeny CSS zaprojektowane tak, aby od razu spełniać współczynniki kontrastu WCAG AA. Brak JavaScript, obsługa trybu ciemnego, kompatybilność z Tailwind CSS v4. Działa z Django, HTMX, Laravel i dowolnym stosem obsługującym tylko CSS.
Przegląd
Frutjam to bezpłatna biblioteka interfejsu użytkownika Tailwind CSS v4, obsługująca wyłącznie CSS. Zero JavaScript, dostępny WCAG AA/AAA, niezależny od frameworka. Buduj nowoczesne interfejsy z komponentami semantycznymi, które współpracują z Django, HTMX, Laravel, React i dowolnym stosem.
Motywy
System motywów Frutjam oparty wyłącznie na CSS wykorzystuje zmienne CSS i pojedynczy atrybut danych. Przełączaj jasne, ciemne i niestandardowe motywy bez JavaScript. Wbudowane tokeny kolorów WCAG AA, współpracują z Django, HTMX, Laravel i dowolnym projektem Tailwind CSS v4.
Instalacja
Zainstaluj Frutjam, bibliotekę interfejsu CSS Tailwind obsługującą wyłącznie CSS, w ciągu kilku minut. Dwa importy, zero JavaScript, dostępne komponenty WCAG od razu po wyjęciu z pudełka. Współpracuje z Django, HTMX, Laravel, React i dowolnym projektem Tailwind CSS v4.
Konfiguracja
Skonfiguruj wtyczkę Tailwind CSS obsługującą wyłącznie Frutjam CSS. Ustaw domyślne motywy, zdefiniuj niestandardowe tokeny kolorów, przełącz system przedrostków - nie jest wymagana żadna obsługa JavaScript. Domyślne ustawienia dostępne w WCAG, działają z Django, HTMX, Laravel i dowolnym frameworkiem.
Typografia
System typografii Frutjam oparty wyłącznie na CSS. Semantyczne skalowanie tekstu HTMX za pomocą Tailwind CSS v4, dostępne WCAG, nie wymaga JavaScript. Współpracuje z Django, HTMX, Laravel, React i dowolnym frameworkiem.
Od czego zacząć
Nowy użytkownik Frutjama? Podążaj tą ścieżką, aby przejść od zera do w pełni tematycznego, dostępnego projektu Tailwind CSS v4.
- 1Instalacja
Zainstaluj pakiet npm i dodaj dwie linie do swojego CSS. Brak konfiguracji JavaScript, brak wtyczek PostCSS.
- 2Przegląd
Dowiedz się, jak Frutjam współpracuje z narzędziami CSS Tailwind, klasami komponentów semantycznych i tokenami kolorów WCAG AA.
- 3Motywy
Zastosuj wbudowany motyw lub utwórz własny, korzystając ze zmiennych CSS i pojedynczego atrybutu
data-theme. - 4Zabarwienie
Dowiedz się, jak działają semantyczne tokeny kolorów i jak każda para
on-{color}automatycznie gwarantuje kontrast WCAG AA. - 5Konfiguracja
Ustaw prefiks, tokeny zakresu dla elementu głównego, wybierz komponenty lub zintegruj z inną strukturą CSS.
Często zadawane pytania
Czy Frutjam wymaga CSS Tailwind w wersji 4?
Tak — Frutjam jest zbudowany dla Tailwind CSS v4 i wykorzystuje dyrektywę @plugin wprowadzoną w v4. Nie jest kompatybilny z Tailwind CSS v3. Jeśli nadal korzystasz z wersji 3, najpierw zaktualizuj ją do wersji 4, korzystając z oficjalnego przewodnika po migracji Tailwind.
Czy Frutjam jest darmowy i open source?
Tak — podstawowa biblioteka komponentów Frutjam jest bezpłatna i ma otwarte oprogramowanie (na licencji MIT). Plany Pro i Team dodają bloki interfejsu premium, szablony i nieograniczoną liczbę żądań Cherry MCP w celu integracji edytora AI.