Provide different color configuration for bg-, text- border- colors

[spiess-demos]

In TW3 it was possible to provide different color configuration for backgroundColor, borderColor, textColor, so that i could craft distinct classes like .bg-message-success and .text-message-success with a config like this:

const tailwindTheme = {}

// other config...

const tailwindCorePluginsColor = ['backgroundColor', 'borderColor', 'textColor']

tailwindCorePluginsColor.forEach(corePlugin => {
  tailwindTheme[corePlugin] = {
    ...tailwindTheme.colors,
    ...require(`./tokens/dist/tailwind/${corePlugin}`)
  }
})

module.exports = {
  theme: tailwindTheme
}

Is this possible, or planned, vor V4?

[wongjn]

It is possible via property-specific namespaces, i.e:

@theme {
  --background-color-message-success: …;
  --border-color-message-success: …;
  --text-color-message-success: …;
}

[spiess-demos]

thank you!