How to support white label solutions in a single codebase with Tailwind CSS

[tictoc-kyle]

I'm trying to figure out the best way to support white label brands within a single codebase using Next.js and Tailwind CSS. What I've come up with so far is to have a predefined custom plugin for each brand, and conditionally swap this plugin based on process.env.BRAND env variable when building each instance of the app. Everything works great so far, brand themes are isolated and the correct fonts are included in each build, however the conditional logic of swapping plugins based on env variables seems to break the Tailwind Intellisense plugin.

I'm just wondering if anyone has tried to achieve something similar, or would advise against my current solution? Any potential problems this might cause?

I've also tried to conditionally import global.css files (ie brandOne.css or brandTwo.css), but Next.js doesn't support this.

I'm aware Tailwind CSS has a @config directory, however this only seems to be useful for projects that need more than one tailwind.config.ts file within the same build. ie. One config for admin routes, and another for public routes. I need entirely isolated builds, one for each brand (each with their respective theme/plugin).

The current solution:
global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind.config.ts

/** @type {import('tailwindcss').Config} */

import plugin from 'tailwindcss/plugin';

const animatePlugin = require('tailwindcss-animate');

const brandOnePlugin = plugin(
  function ({ addBase, theme }) {
    addBase({
      '@font-face': {
        'font-family': 'NunitoSans',
        'font-display': 'fallback',
        'font-weight': '400',
        src: "url('/NunitoSans-Regular.ttf') format('truetype')",
      },
    });
    addBase({
      '@font-face': {
        'font-family': 'NunitoSans',
        'font-display': 'fallback',
        'font-weight': '700',
        src: "url('/NunitoSans-Bold.ttf') format('truetype')",
      },
    });
    addBase({
      html: {
        'font-family': theme('fontFamily.primary'),
      },
      ':root': {
        '--background': '0 0% 100%',
        '--foreground': '240 10% 3.9%',
        '--card': '0 0% 100%',
        '--card-foreground': '240 10% 3.9%',
        '--popover': '0 0% 100%',
        '--popover-foreground': '240 10% 3.9%',
        '--primary': '346.8 77.2% 49.8%',
        '--primary-foreground': '355.7 100% 97.3%',
        '--secondary': '240 4.8% 95.9%',
        '--secondary-foreground': '240 5.9% 10%',
        '--muted': '240 4.8% 95.9%',
        '--muted-foreground': '240 3.8% 46.1%',
        '--accent': '240 4.8% 95.9%',
        '--accent-foreground': '240 5.9% 10%',
        '--destructive': '0 84.2% 60.2%',
        '--destructive-foreground': '0 0% 98%',
        '--border': '240 5.9% 90%',
        '--input': '240 5.9% 90%',
        '--ring': '346.8 77.2% 49.8%',
      },
    });
  },
  {
    theme: {
      extend: {
        fontFamily: {
          primary: ['NunitoSans', 'sans-serif'],
          secondary: ['NunitoSans', 'sans-serif'],
        },
      },
    },
  },
);

const brandTwoPlugin = plugin(
  function ({ addBase, theme }) {
    addBase({
      '@font-face': {
        'font-family': 'Montserrat',
        'font-display': 'fallback',
        'font-weight': '400',
        src: "url('/Montserrat-Regular.ttf') format('truetype')",
      },
    });
    addBase({
      '@font-face': {
        'font-family': 'Montserrat',
        'font-display': 'fallback',
        'font-weight': '700',
        src: "url('/Montserrat-Bold.ttf') format('truetype')",
      },
    });
    addBase({
      html: {
        'font-family': theme('fontFamily.primary'),
      },
      ':root': {
        '--background': '0 0% 100%',
        '--foreground': '20 14.3% 4.1%',
        '--card': '0 0% 100%',
        '--card-foreground': '20 14.3% 4.1%',
        '--popover': '0 0% 100%',
        '--popover-foreground': '20 14.3% 4.1%',
        '--primary': '24.6 95% 53.1%',
        '--primary-foreground': '60 9.1% 97.8%',
        '--secondary': '60 4.8% 95.9%',
        '--secondary-foreground': '24 9.8% 10%',
        '--muted': '60 4.8% 95.9%',
        '--muted-foreground': '25 5.3% 44.7%',
        '--accent': '60 4.8% 95.9%',
        '--accent-foreground': '24 9.8% 10%',
        '--destructive': '0 84.2% 60.2%',
        '--destructive-foreground': '60 9.1% 97.8%',
        '--border': '20 5.9% 90%',
        '--input': '20 5.9% 90%',
        '--ring': '24.6 95% 53.1%',
        '--radius': '0.75rem',
      },
    });
  },
  {
    theme: {
      extend: {
        fontFamily: {
          primary: ['Montserrat', 'sans-serif'],
          secondary: ['Montserrat', 'sans-serif'],
        },
      },
    },
  },
);

const brand = process.env.BRAND // 'brandOne' | 'brandTwo'

const theme = {
  brandOne: brandOnePlugin,
  brandTwo: brandTwoPlugin,
} as const;

const brandPlugin = theme[brand as keyof typeof theme];

const plugins = [animatePlugin, brandPlugin];

module.exports = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    container: {
      center: true,
      padding: '2rem',
      screens: {
        '2xl': '1400px',
      },
    },
    extend: {
      colors: {
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: { height: 0 },
          to: { height: 'var(--radix-accordion-content-height)' },
        },
        'accordion-up': {
          from: { height: 'var(--radix-accordion-content-height)' },
          to: { height: 0 },
        },
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
      },
    },
  },
  plugins,
};

[zithron]

@tictoc-kyle, I think you should add dotenv, so vscode plugin can read yout process.env.BRAND value

[sondr3]

@tictoc-kyle sorry for the necro bump, but did you figure this out? We're looking for a similar setup for a white label product at $WORK as well.

[tictoc-kyle]

No problem @sondr3, I wasn't able to find a solution for the Tailwind Intellisense bug, however I did for the white-label theming. I ended up creating a function that generated plugins for each white-labelled brand, but wrote it in a way that enforced consistencies across each theme (ie. names of theming variables/design tokens).

import plugin from "tailwindcss/plugin";
import { CSSRuleObject, Config } from "tailwindcss/types/config";

export const objectKeys = <TObj extends object>(obj: TObj): (keyof TObj)[] =>
  Object.keys(obj) as (keyof TObj)[];

export const themeSystem = {
  fontFamily: {
    "font-family-primary": "",
    "font-family-secondary": ""
  },
  fontSize: {
    "font-size-heading-4xl": "",
    "font-size-heading-3xl": "",
    "font-size-heading-2xl": "",
    "font-size-heading-xl": "",
    "font-size-body-lg": "",
    "font-size-body": "",
    "font-size-body-sm": "",
    "font-size-body-xs": "",
    ...
  },
  colors: {
    "color-brand-primary": "",
    "color-brand-secondary": "",
    ...
  },
  textColor: {
    "color-foreground-icon": "",
    "color-foreground-heading": "",
    "color-foreground-primary": "",
    "color-foreground-primary-dark": "",
    ...
  },
  backgroundColor: {
    "color-background-primary": "",
    ...
  },
  borderColor: {
    "color-border": "",
    "color-border-error": "",
    "color-border-success": "",
    "color-border-disabled": "",
    ...
  },
  ringColor: {
    "color-ring-focus": ""
  },
  borderRadius: {
    "radius-pill": "",
    "radius-badge": "",
    ...
  },
  borderWidth: {
    "border-width": "",
    ...
  }
} as const;
export type ThemeSystem = typeof themeSystem;

export const themeComponents = {
  typography: {
    "typography-heading-4xl": "",
    "typography-heading-3xl": "",
    "typography-heading-2xl": "",
    "typography-heading-xl": "",
    "typography-body-lg": "",
    "typography-body": "",
    "typography-body-strong": "",
    "typography-body-sm": "",
    ...
  }
} as const;
export type ThemeComponents = typeof themeComponents;

export const themeSystemClasses = objectKeys(themeSystem).reduce(
  (acc, key): Record<keyof typeof themeSystem, string[]> => {
    acc[key] = objectKeys(themeSystem[key]);
    return acc;
  },
  {} as Record<keyof typeof themeSystem, string[]>
);
export const themeComponentClasses = objectKeys(themeComponents).reduce(
  (acc, key): Record<keyof typeof themeComponents, string[]> => {
    acc[key] = objectKeys(themeComponents[key]);
    return acc;
  },
  {} as Record<keyof typeof themeComponents, string[]>
);

type TailwindCSSFontWeight = "normal" | "medium" | "semibold" | "bold";
type TailwindCSSLetterSpacing =
  | "tighter"
  | "tight"
  | "normal"
  | "wide"
  | "wider"
  | "widest";
type TailwindCSSTextTransform = "uppercase" | "normal-case";

type CSSTypographyRuleObject = {
  textColor?: keyof ThemeSystem["textColor"];
  fontSize?: keyof ThemeSystem["fontSize"];
  fontWeight?: TailwindCSSFontWeight;
  letterSpacing?: TailwindCSSLetterSpacing;
  textTransform?: TailwindCSSTextTransform;
};

type MerchantThemeSystem = {
  [TKey in keyof ThemeSystem]: {
    [TTokenKey in keyof ThemeSystem[TKey]]: string;
  };
};

export const createMerchantConfig = ({
  tokens,
  typography = {
    fonts: [],
    components: {}
  }
}: {
  tokens: MerchantThemeSystem;
  typography: {
    fonts: CSSRuleObject[];
    components: Partial<
      Record<keyof ThemeComponents["typography"], CSSTypographyRuleObject>
    >;
  };
}): Config => {
  const rootCSSVariables = objectKeys(tokens).reduce(
    (acc, categoryKey) => {
      const themeCategory = tokens[categoryKey];
      objectKeys(themeCategory).forEach((tokenKey) => {
        acc = { ...acc, [`--${tokenKey}`]: themeCategory[tokenKey] };
      });
      return acc;
    },
    {} as Record<`--${string}`, string>
  );

  const makeThemeTokens = (themeCategory: Record<string, unknown>) => {
    return objectKeys(themeCategory).reduce(
      (acc, key) => {
        acc = { ...acc, [key]: `var(--${key})` };
        return acc;
      },
      {} as Record<string, `var(--${string})`>
    );
  };

  const merchantPlugin = plugin(
    function ({ addBase, addComponents, theme }) {
      typography.fonts.forEach((config) =>
        addBase({
          "@font-face": config
        })
      );

      addComponents({
        ...objectKeys(typography.components).reduce((acc, key) => {
          const merchantOverride = typography.components[key];
          acc = {
            ...acc,
            [`.${key}`]: {
              ...(merchantOverride?.fontSize
                ? {
                    fontSize: theme(`fontSize.${merchantOverride?.fontSize}`)
                  }
                : {}),
              ...(merchantOverride?.fontWeight
                ? {
                    fontWeight: theme(
                      `fontWeight.${merchantOverride?.fontWeight}`
                    )
                  }
                : {}),
              ...(merchantOverride?.letterSpacing
                ? {
                    letterSpacing: theme(
                      `letterSpacing.${merchantOverride?.letterSpacing}`
                    )
                  }
                : {}),
              ...(merchantOverride?.textColor
                ? {
                    color: theme(`textColor.${merchantOverride?.textColor}`)
                  }
                : {}),
              ...(merchantOverride?.textTransform
                ? {
                    textTransform: merchantOverride?.textTransform
                  }
                : {})
            }
          };

          return acc;
        }, {})
      });

      addBase({
        ":root": rootCSSVariables
      });
    },
    {
      theme: {
        fontFamily: makeThemeTokens(tokens.fontFamily),
        fontSize: makeThemeTokens(tokens.fontSize),
        colors: makeThemeTokens(tokens.colors),
        textColor: makeThemeTokens(tokens.textColor),
        backgroundColor: makeThemeTokens(tokens.backgroundColor),
        borderColor: makeThemeTokens({
          ...tokens.ringColor,
          ...tokens.borderColor
        }),
        ringColor: makeThemeTokens({
          ...tokens.ringColor,
          ...tokens.borderColor
        }),
        extend: {
          borderRadius: makeThemeTokens(tokens.borderRadius),
          borderWidth: makeThemeTokens(tokens.borderWidth),
          ringWidth: makeThemeTokens(tokens.borderWidth)
        }
      }
    }
  );

  return {
    darkMode: "selector",
    content: [
      "./pages/**/*.{js,ts,jsx,tsx,mdx}",
      "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
      "./app/**/*.{js,ts,jsx,tsx,mdx}"
    ],
    theme: {
      extend: {
        screens: {
          xs: "480px",
          "2xl": "1400px"
        }
      }
    },
    plugins: [merchantPlugin]
  };
};

Then in my root tailwind.config.ts I just swapped the configs based on an environment variable. If you want to fetch style values from an external source I think you would need to use css variables and update their values with Javascript when your response comes back.