Documentos
Documentação Frutjam — instalação, configuração, temática, cores e tipografia. Tailwind CSS v4 somente CSS, zero JavaScript, WCAG AA acessível. Funciona com Django, HTMX, Laravel, React e qualquer pilha.
These docs cover everything you need to get from a fresh Tailwind CSS v4 project to a fully themed, accessible UI. Start with Installation — two lines of CSS — then explore how the theming system works using CSS variables and a single data-theme attribute. The color system uses semantic OKLCH tokens that automatically meet WCAG AA contrast ratios with no manual color checking required. Configuration options let you scope tokens, add a prefix to avoid conflicts, or cherry-pick only the components you need to keep your CSS output lean.
Cores
O sistema de cores da Frutjam usa tokens CSS semânticos projetados para atender às taxas de contraste WCAG AA prontas para uso. Sem JavaScript, compatível com modo escuro, compatível com Tailwind CSS v4. Funciona com Django, HTMX, Laravel e qualquer pilha somente CSS.
Visão geral
Frutjam é uma biblioteca de UI Tailwind CSS v4 gratuita somente com CSS. Zero JavaScript, WCAG AA/AAA acessível, independente de estrutura. Crie interfaces modernas com componentes semânticos que funcionam com Django, HTMX, Laravel, React e qualquer pilha.
Temas
O sistema de temas somente CSS da Frutjam usa variáveis CSS e um único atributo de dados. Alterne entre temas claros, escuros e personalizados sem JavaScript. Tokens de cores WCAG AA integrados, funcionam com Django, HTMX, Laravel e qualquer projeto Tailwind CSS v4.
Instalação
Instale Frutjam, a biblioteca Tailwind CSS UI somente CSS, em minutos. Duas importações, zero JavaScript, componentes acessíveis WCAG prontos para uso. Funciona com Django, HTMX, Laravel, React e qualquer projeto Tailwind CSS v4.
Configuração
Configure o plugin Tailwind CSS somente Frutjam CSS. Defina temas padrão, defina tokens de cores personalizados, alterne o sistema de prefixo - zero JavaScript necessário. Padrões acessíveis WCAG, funciona com Django, HTMX, Laravel e qualquer framework.
Tipografia
Sistema de tipografia somente CSS da Frutjam. Dimensionamento de texto HTMX semântico com Tailwind CSS v4, WCAG acessível, sem necessidade de JavaScript. Funciona com Django, HTMX, Laravel, React e qualquer framework.
Where to start
New to Frutjam? Follow this path to go from zero to a fully themed, accessible Tailwind CSS v4 project.
- 1Installation
Install the npm package and add two lines to your CSS. No JavaScript config, no PostCSS plugins.
- 2Overview
Understand how Frutjam works alongside Tailwind CSS utilities, semantic component classes, and WCAG AA color tokens.
- 3Themes
Apply a built-in theme or build your own with CSS variables and a single
data-themeattribute. - 4Colors
Learn how semantic color tokens work and how every
on-{color}pair guarantees WCAG AA contrast automatically. - 5Configuration
Set a prefix, scope tokens to a root element, cherry-pick components, or integrate alongside another CSS framework.
Frequently asked questions
Does Frutjam require Tailwind CSS v4?
Yes — Frutjam is built for Tailwind CSS v4 and uses the @plugin directive introduced in v4. It is not compatible with Tailwind CSS v3. If you are still on v3, upgrade to v4 first using the official Tailwind migration guide.
Is Frutjam free and open source?
Yes — the core Frutjam component library is free and open source (MIT licensed). Pro and Team plans add premium UI blocks, templates, and unlimited Cherry MCP requests for AI editor integration.