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.

[marcantoinepelletier]

Great that's what I needed ! Thank you :)

[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