Learn How to Dynamically Style Your Multi-Tenant App with Tailwind CSS

If you're building an app that serves multiple tenants, like different clients or domains, you might want each one to have its own unique look. A simple way to achieve this is by combining Tailwind CSS with CSS variables to easily switch colors and styles depending on the tenant.

UI screenshots:

Steps to follow:

Tailwind Configuration:

First, you'll configure Tailwind to use CSS variables for colors. This allows you to change styles dynamically based on the tenant.

In your tailwind.config.js, add the following code to set up the colors:

theme: {
  extend: {
    colors: {
      primary: 'var(--primary-color)',
      secondary: 'var(--secondary-color)',
    },
  },
},

Global CSS:

Next, define the colors for each tenant in your global CSS file (globals.css). Here's an example where Tenant A and Tenant B have different color schemes:

body.tenantA {
  --primary-color: #1D4ED8;
  --secondary-color: #64748B;
}
body.tenantB {
  --primary-color: #EF4444;
  --secondary-color: #F97316;
}

Detecting the Tenant:

To apply the correct tenant class to the <body>, you’ll need to detect which tenant is being used, usually based on the domain or headers. Then, add a class like tenantA or tenantB dynamically to the body (I leave that to you).

In your layout component, you might do something like this:

export default function RootLayout({ children }) {
 // Logic based on headers or host
  const tenant = determineTenant();
  return <body className={tenant}>{children}</body>;
}

Using Tailwind Classes:

Now, you can use Tailwind’s utility classes like bg-primary and text-secondary in your components. Tailwind will automatically apply the right colors based on the tenant.

Here's an example for a homepage component:

export default function HomePage() {
  return <div className="bg-primary text-white p-4">Welcome!</div>;
}

Why This Works:

By combining Tailwind CSS and CSS variables, you can easily switch themes depending on which tenant is using the app. This gives you flexibility without repeating a lot of code, making your app easier to maintain as it grows.

If you want to dive deeper into more advanced techniques for multi-tenant UIs, check out this article: Designing Multi-Tenant UI with Tailwind CSS.

Conclusion:

This approach allows you to manage multiple tenants with different themes effortlessly, using Tailwind CSS. It’s simple, effective, and perfect for apps that need different looks for different clients.

Blog