Scoped Color Tokens in Tailwind v4 – Still Possible?

[TomasSlama]

Hey everyone,

In Tailwind v3, we structured our colors in a way that allowed us to define a global color palette while also scoping specific colors for different use cases like backgrounds, borders, and text.

For example, in our Tailwind config:

const PALETTE: {
      black: '..',
      white: '..',
      neutral: { 100: '', 200: '', 300: ''},
      green: { 100: '', 200: '', 300: ''},
      // and so on...
    }

module.exports = {
  theme: {
    colors: PALETTE,
    backgroundColor: {
      primary: PALETTE.green['100'],
      secondary: PALETTE.blue['100'],
      body: '',
      success: '',
      danger: '',
    },
    borderColor: {
      primary: PALETTE.green['200'], // could differ from background primary
//...
    },
    textColor: {
     //...
    },
  }
}

This setup had a few key benefits:
✅ Encapsulation – Engineers only choose colors meant for a specific purpose (e.g., only "background colors" for backgrounds).
✅ Design consistency – Prevents random color choices outside the defined design system.
✅ Easier maintenance – Updating a category (e.g., all background colors) was straightforward.

We haven’t migrated to Tailwind v4 yet, but from our initial look at the documentation, it seems that defining backgroundColor, textColor, and borderColor separately like this may no longer be possible. It looks like everything is now inside a single extend.colors object.

Questions for the community:

• Can we still achieve this type of scoped color configuration in v4?
• If not, how are teams handling color token organization in v4?
• Any best practices for maintaining strict color usage rules in v4?

Would love to hear how others are approaching this! 🚀

[wongjn]

Can we still achieve this type of scoped color configuration in v4?

Yes you can:

@theme {
  --colors-black: …;
  --colors-white: …;
  --colors-neutral-100: …;
  --colors-neutral-200: …;
  --colors-neutral-300: …;
  --colors-green-100: …;
  --colors-green-200: …;
  --colors-green-300: …;
  /* and so on… */

  --background-color-primary: var(--color-green-100);
  --background-color-secondary: var(--color-blue-100);
  --background-color-body: …;
  --background-color-success: …;
  --background-color-danger: …;

  --border-color-primary: var(--color-green-200)
}

[TomasSlama]

awesome, thank you for your reply 🙇

[fokkerone]

For borders + outline is there no DEFAULT value anymore?