Bring back extend.xyz support in Tailwind CSS v4

[marcantoinepelletier]

In my current project, we have colors that are only meant for text and background and shouldn't be part of the main colors object.

In Tailwind v3, we were able to extend textColor and backgroundColor separately using the extend option in tailwind.config.js, like this:

export const theme = {
  extend: {
    textColor: {
      primary: 'var(--p-color-text-primary)',
      secondary: 'var(--p-color-text-secondary)',
    },
    backgroundColor: {
      soft: 'var(--p-color-background-soft)',
      highlight: 'var(--p-color-background-highlight)',
    },
  },
};

However, in Tailwind CSS v4, this option no longer seems to work. Instead, the only alternative appears to be defining each color manually inside @layer utilities in CSS:

@layer utilities {
  .text-primary { color: var(--p-color-text-primary); }
  .bg-soft { background-color: var(--p-color-background-soft); }
}

This raises a few concerns:

• Has this option been fully removed, or is there an alternative way to do this in v4?
• Is customization now more limited than before, requiring more manual CSS definitions?
• What’s the recommended approach to define text/background-specific colors without affecting the global colors object?

Would love to get clarification on whether extend.textColor and extend.backgroundColor are officially deprecated, or if there's another method we should be using in v4.

Thanks in advance for any insights!

[wongjn]

Has this option been fully removed, or is there an alternative way to do this in v4?

There is an alternative way to do this in v4:

@theme {
  --text-color-primary: var(--p-color-text-primary);
  --text-color-secondary: var(--p-color-text-secondary);

  --background-color-soft: var(--p-color-background-soft);
  --background-color-highlight: var(--p-color-background-highlight);
}

Is customization now more limited than before, requiring more manual CSS definitions?

Yes, we don't have the full JavaScript language constructs available in CSS.

What’s the recommended approach to define text/background-specific colors without affecting the global colors object?

See above.

[andrew-pledge-io]

I had the same question, thanks for this answer.

Are the namespaces for each property listed somewhere in the code or documentation?

[wongjn]

Yes, search through https://github.com/tailwindlabs/tailwindcss/blob/main/packages/tailwindcss/src/utilities.ts

[yuzhakovvv]

Hey @wongjn

After 10 months since your original answer, is there more clarity on whether Tailwind 4 will support namespaces like --background-color-*, --text-color-* officially (e.g. add them to the docs)?

Now it feels like a hacky workaround and a legacy of Tailwind 3 that may be deprecated in the next versions.

Thanks

[rozsazoltan]

I think changes of this magnitude won't happen overnight, and even if they did, the namespaces could be manually patched using @utility. For example, in the case of --text-color and --background-color, this would be the polyfill:

@utility text-* {
  color: --value(--text-color-*);
  color: color-mix(in srgb, --value(--text-color-*) calc(--modifier(integer) * 1%), transparent);
  @supports (color: color-mix(in lab, red, red)) {
    color: color-mix(in oklab, --value(--text-color-*) calc(--modifier(integer) * 1%), transparent);
  }
}

@utility bg-* {
  background-color: --value(--background-color-*);
  background-color: color-mix(in srgb, --value(--background-color-*) calc(--modifier(integer) * 1%), transparent);
  @supports (color: color-mix(in lab, red, red)) {
    background-color: color-mix(in oklab, --value(--background-color-*) calc(--modifier(integer) * 1%), transparent);
  }
}

And now again will be working --text-color-* and --background-color-* namespaces.

[wongjn]

@yuzhakovvv I don't think it is regarded as deprecated. Rather, the maintainers see "the full list ends up being extremely long and not really useful" and thus don't want to add all the namespaces to the documentation website¹

Footnotes

1. https://github.com/tailwindlabs/tailwindcss.com/pull/2178#issuecomment-3281277063. ↩

[rozsazoltan]

Reference:

• Which TailwindCSS v4 namespace matches a given TailwindCSS v3's theme keys? #19020