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.
Esses documentos cobrem tudo que você precisa para ir de um novo projeto Tailwind CSS v4 a uma interface de usuário acessível e totalmente temática. Comece com Installation — duas linhas de CSS — e depois explore como o sistema de temas funciona usando variáveis CSS e um único atributo data-theme. O sistema de cores usa tokens semânticos OKLCH que atendem automaticamente às taxas de contraste WCAG AA sem necessidade de verificação manual de cores. As opções de configuração permitem definir o escopo de tokens, adicionar um prefixo para evitar conflitos ou escolher apenas os componentes necessários para manter sua saída CSS enxuta.
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.
Por onde começar
Novo no Frutjam? Siga este caminho para ir do zero a um projeto Tailwind CSS v4 totalmente temático e acessível.
- 1Instalação
Instale o pacote npm e adicione duas linhas ao seu CSS. Sem configuração de JavaScript, sem plug-ins PostCSS.
- 2Visão geral
Entenda como o Frutjam funciona junto com os utilitários CSS do Tailwind, classes de componentes semânticos e tokens de cores WCAG AA.
- 3Temas
Aplique um tema integrado ou crie o seu próprio com variáveis CSS e um único atributo
data-theme. - 4Cores
Aprenda como funcionam os tokens de cores semânticas e como cada par
on-{color}garante o contraste WCAG AA automaticamente. - 5Configuração
Defina um prefixo, tokens de escopo para um elemento raiz, escolha componentes ou integre-os com outra estrutura CSS.
Perguntas frequentes
O Frutjam requer Tailwind CSS v4?
Sim - Frutjam foi desenvolvido para Tailwind CSS v4 e usa a diretiva @plugin introduzida na v4. Não é compatível com Tailwind CSS v3. Se você ainda estiver na v3, atualize para a v4 primeiro usando o guia oficial de migração do Tailwind.
O Frutjam é gratuito e de código aberto?
Sim - a biblioteca principal de componentes Frutjam é gratuita e de código aberto (licenciada pelo MIT). Os planos Pro e Team adicionam blocos de UI premium, modelos e solicitações Cherry MCP ilimitadas para integração do editor de IA.