Scoped Color Tokens in Tailwind v4 – Still Possible? #16111
-
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: 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:
Would love to hear how others are approaching this! 🚀 |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
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)
} |
Beta Was this translation helpful? Give feedback.
Yes you can: