2. Real-world story

Acme Corp and GreenBank share app code but users see their own brand colors.

Outcome: Multi-tenant CSS variables enable scalable white-label without forked codebases.

3. Why it matters

StyleVerse hosts hundreds of B2B customers each needing their brand on shared SaaS shell without separate deploy per tenant.

4. Visual understanding

Read this diagram — the mental model for Multi-Tenant SaaS UI.

StyleVerse project UI
┌─ header / brand ─────────────┐
├─ nav ─┬─ main content ───────┤
│       │  cards / tables / KPI│
└───────┴──────────────────────┘
tokens + layout + a11y + responsive

5. Key concepts (easy words)

6. How it works

• Tenant variables default to StyleVerse blue. data-tenant attribute overrides primary and background for Acme purple or GreenBank green. Card accent border uses tenant primary.
• CSS variables swap per data-tenant attribute.
• Shared components, different brand colors.
• Check the result in DevTools → Computed and the box model overlay.

7. Choose wisely

8. Try this example

Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.

/* MultiTenantSaas.css */
.sv-tenant-app { min-height: 100vh; background: var(--tenant-bg, #f8fafc); }
.sv-tenant-header { background: var(--tenant-primary, #2874f0); color: var(--tenant-on-primary, #fff); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
.sv-tenant-logo { height: 32px; }
[data-tenant="acme"] { --tenant-primary: #6d28d9; --tenant-bg: #faf5ff; }
[data-tenant="greenbank"] { --tenant-primary: #2e7d32; --tenant-bg: #f1f8e9; }
.sv-tenant-card { background: #fff; border-radius: 8px; padding: 20px; border-top: 4px solid var(--tenant-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.sv-tenant-btn { background: var(--tenant-primary); color: var(--tenant-on-primary, #fff); padding: 10px 20px; border: none; border-radius: 6px; }

Line walkthrough

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

9. Another real-world angle

10. Best practices checklist

• Prefer classes over ids for reusable StyleVerse components.
• Use design tokens (CSS variables) for color and spacing.
• Mobile-first media queries; test keyboard focus.
• Keep specificity low — avoid !important except rare overrides.
• Animate transform/opacity when you can; respect prefers-reduced-motion.

11. Common mistakes

• Separate CSS file per tenant — unmaintainable at scale.
• Hardcoded #2874f0 in components bypassing tenant vars.

12. Practice in the browser

1. Set data-tenant="acme" on html element.
2. Verify header and buttons turn purple.
3. Switch to greenbank and confirm theme swap.
4. Load tenant config from API and apply CSS vars in JS.

Experiments

• Add [data-tenant="flipkart"] { --tenant-primary: #2874f0; } default partner.
• Inject --tenant-logo-url for background-image on header.

13. FAQ

14. Interview questions

15. Remember

• CSS variables swap per data-tenant attribute.
• Shared components, different brand colors.
• One bundle serves all SaaS customers.