Custom CSS
Users with programming knowledge
Updated Sep 2025
In Advanced Editing mode, you can use Tailwind CSS classes to customize your website's styling. This guide explains how Tailwind CSS works in Oniva.io and covers the specific features available to you.
Edit CSS Classes
To customize an element with Tailwind CSS classes:
1 - Switch to Advanced Editing mode (if not already enabled)
2 - Click on the element you want to edit on your webpage
3 - Go to the Advanced tab in the left side panel
You'll see all the current Tailwind CSS classes that are applied to that element. From there, you can modify existing classes or add new ones to customize your element's appearance.
Quick Reference
What You Want
How to Do It
Example
Standard Tailwind
Use any normal class
bg-blue-500 p-4 text-white
Your theme colors
Use theme color names
bg-primary text-secondary
Force exact styling
Add ! before class
!bg-blue-500 !text-white
Mix everything
Combine freely
bg-primary p-4 !shadow-lg
Key Takeaways
Use any standard Tailwind CSS class - everything works just like normal Tailwind.
Add theme colors for brand consistency (bg-primary, text-secondary, etc.).
Add overrides with ! when you need exact control.
Mix and match standard colors, theme colors, and overrides as needed.
Using standard Tailwind CSS classes
In Advanced Editing mode, you can use any standard Tailwind CSS class just like you would in any other project.
html
<div class="bg-blue-500 text-white p-4 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-2">Standard Tailwind</h2>
<p class="text-sm opacity-90">Use any Tailwind class you know!</p>
</div>
All your favorite Tailwind features work:
- Layout:
flex
grid
absolute
relative
- Spacing:
p-4
m-8
space-y-3
gap-6
- Colors:
bg-red-500
text-blue-600
border-gray-300
- Typography:
text-xl
font-bold
leading-relaxed
- Effects:
shadow-lg
hover:opacity-75
transition-all
- Responsive:
md:text-2xl
lg:grid-cols-3
Oniva.io comes with some extra animations you can use on top of TailwindCSS’s built-in ones. You’ve got animate-scroll-left and animate-scroll-right to make things slide smoothly across the screen, and wave to add a fun wavy motion. Easy to use and adds a bit of extra life to your elements!
Theme Colors
Theme colors can be accessed not only through the themes panel, but also when you're using CSS classes in Advanced Editing mode. This means you can apply your custom theme colors directly through Tailwind CSS classes, giving you the flexibility to use your brand colors anywhere in your code.
Note: Oniva.io includes a custom themes feature where you can set specific colors and font family for your entire website. See our Custom Themes Guide to learn how to set up and customize your theme.
Why Use Theme Colors?
The biggest benefit of using theme colors in your CSS is automatic updates. Here's the key difference:
Using
bg-blue-100
→
Always stays blue-100, never changes
Using
bg-primary
→
Automatically updates when you change your theme
If you change your website's theme colors, all elements using theme color classes will update automatically across your entire site. No need to manually update every page.
Available Theme Colors
You can use these theme colors with any Tailwind prefix (bg-, text-, border-, etc.):
- primary - Your main brand color
- secondary - Your secondary brand color
- background - Your background color
- text - Your main text color
- neutral - Neutral/gray color from your theme
- accent - Your accent/highlight color
Automatic Contrast Colors
Oniva.io automatically calculates high-contrast colors for text readability on your theme colors. Access these with the -foreground suffix:
- primary-foreground - High contrast color for text on primary background
- secondary-foreground - High contrast color for text on secondary background
- accent-foreground - High contrast color for text on accent background
- neutral-foreground - High contrast color for text on neutral background
Important: If you use a Tailwind class that we haven't mapped in the editor yet, you might not see it reflected in the website editor preview. However, when you publish your page and view it live, the class will work correctly because we compile all CSS classes during the publishing process. For example, if you write
bg-background/5
maybe you won't see it working on the editor, but you'll see it working when you view your published page.
Tip: You can freely mix theme colors with standard Tailwind colors in the same element! For example:
bg-background p-8 border border-gray-200
uses your theme's background color while keeping standard gray borders.
Override Configuration
Sometimes you need to override Oniva.io's default configurations. Add an exclamation mark (!) before any class to force your styling:
How Overrides Work
html
<!-- Standard class (may use Oniva.io defaults) -->
<div class="p-4 bg-blue-500">Normal styling</div>
<!-- Override class (forces your exact values) -->
<div class="!p-4 !bg-blue-500">Forced styling</div>
When to Use Overrides
Use
!
when:
- Default spacing and layout doesn't match your design needs
- You need exact control over specific elements
- Your custom styling isn't applying as expected