0PricingLogin▼
Tailwind CSS Academy · Lesson

Multi-Brand Theming Strategy

Implement multiple brand themes by swapping CSS variable values under different root selectors or data-theme attributes.

What Is Multi-Brand Theming?

Multi-brand theming means a single codebase renders different visual identities for different clients, products, or sub-brands. A SaaS company might share one React application between ten enterprise customers, each expecting their logo colors and typography. With a well-designed Tailwind token system, switching brands requires only swapping a set of CSS variable values — no code changes, no separate builds.

Root Selector Swapping Strategy

The simplest multi-brand strategy uses a data attribute on the root element to scope different variable sets. Each brand's variables live under a [data-brand='brandname'] block. JavaScript reads the active brand from configuration, an API, or a URL parameter and sets the attribute on document.documentElement. Tailwind utility classes reference the variables, so they automatically adopt the active brand's values.

/* globals.css */
[data-brand='acme'] {
  --color-primary: #e11d48;
  --color-surface: #fff1f2;
  --font-heading: 'Poppins', sans-serif;
}

[data-brand='globex'] {
  --color-primary: #0284c7;
  --color-surface: #f0f9ff;
  --font-heading: 'Inter', sans-serif;
}

/* Apply in JS */
document.documentElement.setAttribute('data-brand', 'acme');

All lessons in this course

  1. Primitive vs Semantic Tokens
  2. CSS Variable-Based Theming
  3. Multi-Brand Theming Strategy
  4. Token Documentation and Governance
← Back to Tailwind CSS Academy