Help with Tailwind 4.0 Theming and OKLCH from calculation

[raptoria]

Hi all,
I just upgraded to Tailwind 4.0.
I was doing some dynamic theming, eg. My tailwind.config.js had some stuff like this in it:

colors: {
        accent: {
          DEFAULT: "var(--accent)",
          "alpha-10": "oklch(from var(--accent) l c h/.10)",
          "alpha-20": "oklch(from var(--accent) l c h/.20)",
          "alpha-30": "oklch(from var(--accent) l c h/.30)",
          "alpha-40": "oklch(from var(--accent) l c h/.40)",
          "alpha-50": "oklch(from var(--accent) l c h/.50)",
          "alpha-70": "oklch(from var(--accent) l c h/.70)",
          "light-10": "oklch(from var(--accent) calc(l + 0.10) c h)",
          "light-40": "oklch(from var(--accent) calc(l + 0.40) c h)",
          "chroma-5": "oklch(from var(--accent) l calc(c + .05) h)",
          "chroma-10": "oklch(from var(--accent) l calc(c + .10) h)",
          "hue-10": "oklch(from var(--accent) l c calc(h + .10))",
        },
        logo: {
          DEFAULT: "var(--logo)",
        },
        background: {
          DEFAULT: "var(--background)",
          "dark-1": "oklch(from var(--background) calc(l - 0.01) c h)",
          "dark-2": "oklch(from var(--background) calc(l - 0.02) c h)",
          "dark-3": "oklch(from var(--background) calc(l - 0.03) c h)",
          "dark-5": "oklch(from var(--background) calc(l - 0.05) c h)",
          "dark-10": "oklch(from var(--background) calc(l - 0.10) c h)",
          "dark-15": "oklch(from var(--background) calc(l - 0.15) c h)",
          "light-1": "oklch(from var(--background) calc(l + 0.01) c h)",
          "light-2": "oklch(from var(--background) calc(l + 0.02) c h)",
          "light-3": "oklch(from var(--background) calc(l + 0.03) c h)",
          "light-4": "oklch(from var(--background) calc(l + 0.04) c h)",
          "light-5": "oklch(from var(--background) calc(l + 0.05) c h)",
          "light-8": "oklch(from var(--background) calc(l + 0.08) c h)",
          "light-10": "oklch(from var(--background) calc(l + 0.10) c h)",
          "light-15": "oklch(from var(--background) calc(l + 0.15) c h)",
          "light-50": "oklch(from var(--background) calc(l + 0.50) c h)",
        },
        foreground: {
          DEFAULT: "var(--foreground)",
          "dark-10": "oklch(from var(--foreground) calc(l - 0.10) c h)",
          "dark-20": "oklch(from var(--foreground) calc(l - 0.20) c h)",
          "dark-30": "oklch(from var(--foreground) calc(l - 0.30) c h)",
          "light-40": "oklch(from var(--foreground) calc(l + 0.40) c h)",
          "light-50": "oklch(from var(--foreground) calc(l + 0.50) c h)",
          "light-70": "oklch(from var(--foreground) calc(l + 0.70) c h)",
          "light-80": "oklch(from var(--foreground) calc(l + 0.80) c h)",
        },

The upgrade conversion tool turned it into this:

 --color-accent: var(--accent);
  --color-accent-alpha-10: oklch(from var(--accent) l c h/.10);
  --color-accent-alpha-20: oklch(from var(--accent) l c h/.20);
  --color-accent-alpha-30: oklch(from var(--accent) l c h/.30);
  --color-accent-alpha-40: oklch(from var(--accent) l c h/.40);
  --color-accent-alpha-50: oklch(from var(--accent) l c h/.50);
  --color-accent-alpha-70: oklch(from var(--accent) l c h/.70);
  --color-accent-light-10: oklch(from var(--accent) calc(l + 0.1) c h);
  --color-accent-light-40: oklch(from var(--accent) calc(l + 0.4) c h);
  --color-accent-chroma-5: oklch(from var(--accent) l calc(c + 0.05) h);
  --color-accent-chroma-10: oklch(from var(--accent) l calc(c + 0.1) h);
  --color-accent-hue-10: oklch(from var(--accent) l c calc(h + 0.1));

  --color-background: var(--background);
  --color-background-dark-1: oklch(from var(--background) calc(l - 0.01) c h);
  --color-background-dark-2: oklch(from var(--background) calc(l - 0.02) c h);
  --color-background-dark-3: oklch(from var(--background) calc(l - 0.03) c h);
  --color-background-dark-5: oklch(from var(--background) calc(l - 0.05) c h);
  --color-background-dark-10: oklch(from var(--background) calc(l - 0.1) c h);
  --color-background-dark-15: oklch(from var(--background) calc(l - 0.15) c h);
  --color-background-light-1: oklch(from var(--background) calc(l + 0.01) c h);
  --color-background-light-2: oklch(from var(--background) calc(l + 0.02) c h);
  --color-background-light-3: oklch(from var(--background) calc(l + 0.03) c h);
  --color-background-light-4: oklch(from var(--background) calc(l + 0.04) c h);
  --color-background-light-5: oklch(from var(--background) calc(l + 0.05) c h);
  --color-background-light-8: oklch(from var(--background) calc(l + 0.08) c h);
  --color-background-light-10: oklch(from var(--background) calc(l + 0.1) c h);
  --color-background-light-15: oklch(from var(--background) calc(l + 0.15) c h);
  --color-background-light-50: oklch(from var(--background) calc(l + 0.5) c h);

I was loading branding colors in dynamically (user’s color prefs are saved on the backend) so I had some JS code that took these branding colors and set CSS variables

Eg:

const setCSSVariablesToBrand = (branding: IBranding["theme"], theme: Theme) => {
  if (!branding) {
    return;
  }

  clearStyles();

  if (branding[theme]?.background) {
    document.body.style.setProperty(
      "--background",
      branding[theme]?.background as string
    );
  }

  if (branding[theme]?.foreground) {
    document.body.style.setProperty(
      "--foreground",
      branding[theme]?.foreground as string
    );
  }

  if (branding[theme]?.accent) {
    document.body.style.setProperty(
      "--accent",
      branding[theme]?.accent as string
    );
  }

  if (branding[theme]?.logo) {
    document.body.style.setProperty(
      "--logo",
      branding[theme]?.logo as string
    );
  }

in Tailwind 3.0, as soon as the CSS variables got set, the colors specified in my tailwind.config.js updated automatically, eg. "dark-2": "oklch(from var(--background) calc(l - 0.02) c h)", recalculated using the —background set on the body. I only had to load the base CSS variable style, eg. —background, —foreground, —accent and —logo onto document.body.

With tailwind 4.0, the colors do not recalculate inside @theme. So --color-background-light-8: oklch(from var(--background) calc(l + 0.08) c h); does not contain the newly loaded CSS variable. The only solution I can think of is to load every single color value inside @theme onto document.body. I was curious if there’s a more optimal approach. Any ideas?

Thanks!

[wongjn]

You could try one of:

• Setting the CSS variables on document.documentElement
• Using @theme inline instead of @theme.

[raptoria]

omg thank you so much. The @theme inline fixed everything.