CSS Personalizado
Usuários com conhecimento em programação
Atualizado em Set. 2025
No modo de Edição Avançada, você pode usar classes do Tailwind CSS para personalizar o estilo do seu site. Este guia explica como o Tailwind CSS funciona no Oniva.io e mostra os recursos específicos que você pode usar.
Editar Classes CSS
Para personalizar um elemento com classes do Tailwind CSS:
1 – Ative o modo de Edição Avançada (caso ainda não esteja habilitado)
2 – Clique no elemento que você quer editar na sua página.
3 – Vá até a aba Avançado no painel lateral esquerdo.
Você vai ver todas as classes do Tailwind CSS que estão aplicadas naquele elemento. A partir daí, você pode modificar classes existentes ou adicionar novas para personalizar a aparência do elemento.
Guia para Referência
O Que Você Deseja
Como fazer
Exemplo
Tailwind Padrão
Usar qualquer classe normal
bg-blue-500 p-4 text-white
As cores do seu tema
Usar nomes das cores do tema
bg-primary text-secondary
Forçar estilo exato
Adicionar ! antes da classe
!bg-blue-500 !text-white
Misturar tudo
Combinar livremente
bg-primary p-4 !shadow-lg
Pontos Chave
Use qualquer classe padrão do Tailwind CSS — tudo funciona exatamente como no Tailwind normal.
Adicione as cores do tema para manter a identidade da marca (bg-primary, text-secondary, etc.).
Adicione overrides com ! quando precisar de controle exato.
Combine cores padrão, cores do tema e overrides conforme necessário.
Usando classes padrão do Tailwind CSS
No modo de Edição Avançada, você pode usar qualquer classe padrão do Tailwind CSS exatamente como faria em qualquer outro projeto.
html
<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-2">Tailwind Padrão</h2>
<p class="text-sm opacity-90">Use qualquer classe padrão do Tailwind CSS que vpcê conhece!</p>
</div>
Todos os seus recursos favoritos do Tailwind funcionam:
- Layout:
flex
grid
absolute
relative
- Espaçamento:
p-4
m-8
space-y-3
gap-6
- Cores:
bg-red-500
text-blue-600
border-gray-300
- Tipografia:
text-xl
font-bold
leading-relaxed
- Efeitos:
shadow-lg
hover:opacity-75
transition-all
- Responsividade:
md:text-2xl
lg:grid-cols-3
O Oniva.io vem com algumas animações extras que você pode usar além das já incluídas no TailwindCSS. Tem o animate-scroll-left e animate-scroll-right, que fazem os elementos deslizarem suavemente pela tela, e o wave, que adiciona um movimento ondulado divertido. Fáceis de usar e dão mais vida aos seus elementos!
Cores do Tema
As cores do tema podem ser acessadas não só pelo painel de temas, mas também quando você usa classes CSS no modo de Edição Avançada. Isso significa que você pode aplicar as cores do seu tema diretamente pelas classes do Tailwind CSS, dando a flexibilidade de usar as cores da sua marca em qualquer lugar do seu código.
Observação: O Oniva.io inclui o recurso de temas personalizados, onde você pode definir cores específicas e a família de fontes para todo o seu site. Confira nosso Guia de Temas Personalizados para aprender a configurar e personalizar seu tema.
Por Que Usar as Cores do Tema?
O maior benefício de usar as cores do tema no seu CSS são as atualizações automáticas. A diferença principal é:
Ao usar
bg-blue-100
→
Sempre permanece como blue-100, nunca muda
Ao usar
bg-primary
→
Atualiza automaticamente quando você altera o tema
Se você alterar as cores do tema do seu site, todos os elementos que usam classes de cores do tema serão atualizados automaticamente em todo o site. Não é necessário atualizar cada página manualmente.
Cores de Tema Disponíveis
Você pode usar essas cores do tema com qualquer prefixo do Tailwind (bg-, text-, border-, etc.):
- primary - Sua cor principal da marca
- secondary - Sua cor secundária da marca
- background - Sua cor de fundo
- text - Sua cor principal do texto
- neutral - Cor neutra/cinza do seu tema
- accent - Sua cor de destaque
Cores Automáticas de Contraste
O Oniva.io calcula automaticamente cores de contraste para garantir a legibilidade do texto nas cores do seu tema. Você pode acessá-las com o sufixo -foreground:
- primary-foreground - Cor de contraste para texto em fundo primário
- secondary-foreground - Cor de contraste para texto em fundo secundário
- accent-foreground - Cor de contraste para texto em fundo de destaque
- neutral-foreground - Cor de contraste para texto em fundo neutro
Importante: Se você usar uma classe do Tailwind que ainda não mapeamos no editor, talvez ela não apareça na pré-visualização do editor do site. Porém, quando você publicar a página e vê-la ao vivo, a classe funcionará corretamente, pois todas as classes CSS são compiladas durante o processo de publicação. Por exemplo, se você escrever:
bg-background/5
Talvez você não veja funcionando no editor, mas verá funcionando quando acessar a página publicada.
Dica: Você pode misturar livremente as cores do tema com as cores padrão do Tailwind no mesmo elemento! Por exemplo:
bg-background p-8 border border-gray-200
usa a cor de fundo do seu tema enquanto mantém as bordas cinza padrão.
Sobrescrever Configuração
Às vezes, é necessário sobrescrever as configurações padrão do Oniva.io. Adicione um ponto de exclamação (!) antes de qualquer classe para forçar o estilo:
Como Funciona Sobrescrever
html
<!-- Classe padrão (pode usar os padrões do Oniva.io)
-->
<div class="p-4 bg-blue-500">Estilo normal</div>
<!-- Classe sobrescritas(força os valores exatos que você definiu) -->
<div class="!p-4 !bg-blue-500">Estilo sobrescrito</div>
Quando Usar o Sobrescrever
Use
!
quando:
- O espaçamento e o layout padrão não correspondem às suas necessidades de design
- Você precisa de controle exato sobre elementos específicos
- Seu estilo personalizado não está sendo aplicado como esperado