Dynamic Themes for Multi tenant application where themes comes from remote database

[AvinashKasukurthi]

I want to create a Multi Tenant Application. Where I am struggling is I need to load the theme from external remote database and replace the colors in globals.css and other configuration.

[wongjn]

You could consider using CSS variables like:

@theme {
  /* Default values */
  --color-primary: red;
  --color-secondary: blue;
  …
}

Then, in the application, redefine the CSS variables, in a <style> tag or dynamically-generated CSS from the application, etc:

<style>
:root {
  /* Real values */
  --color-primary: #123456; 
  --color-secondary: #abcdef;
  …
}
</style>

Or

:root {
  /* Real values */
  --color-primary: #123456; 
  --color-secondary: #abcdef;
  …
}

[rozsazoltan]

The key point is that if the code doesn't go through the TailwindCSS compiler - for example, if you store it in a database or somewhere else - it shouldn't contain any TailwindCSS-specific syntax. In @theme, you must declare everything globally at least once (in source code; not in DB); after that, you can override them using CSS variables.

Here's some content related to theme handling.

• How to use custom color themes in TailwindCSS v4 - @layer theme & @variant dark - So instead of using @variant dark, you'll need to repeat the CSS selector required for dark mode in the database.
• How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root - You can use @layer theme without any problem, but @theme is a TailwindCSS-specific directive, so it doesn't belong in the database.
• Should I use @theme or @theme inline? - Not directly relevant - it just highlights that you'll probably need to declare the colors in @theme so that global variables with matching names can be linked to them.
• When should I use * and when should I use :root, :host as the parent selector?

So, dark mode in the default source:

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-pink: #eb6bd8;
}

@layer theme {
  :root, :host {
    @variant dark {
      --color-pink: #8e0d7a;
    }
  }
}

Then the CSS code stored in the database, which you can use to override it under certain conditions:

@layer theme {
  :root, :host {
    --color-pink: #ccc;

    /* Make sure the dark selector matches the custom variant */
    &:where(.dark, .dark *) {
      --color-pink: #111;
    }
  }
}

Of course, you can also store only the variables in the database and insert the values into the appropriate places within a preformatted CSS file.

Light CSS	Dark CSS
--color-pink: #ccc;	--color-pink: #111;

@layer theme {
  :root, :host {
     ${insert here light-css}

    /* Make sure the dark selector matches the custom variant */
    &:where(.dark, .dark *) {
      ${insert here dark-css}
    }
  }
}

It doesn't matter where you add this to your page's content, but make sure to include it after global.css, since in terms of CSS specificity, the last added styles are the strongest. Alternatively, you can declare extra layers, or place the override in base, which by default is stronger than theme.

And of course, just like with dark mode, you can declare any number of themes, which you can then override even when stored in the database.