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.