Skip to content

Scoped Color Tokens in Tailwind v4 – Still Possible? #16111

Answered by wongjn
TomasSlama asked this question in Help
Discussion options

You must be logged in to vote

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)
}

Replies: 1 comment 1 reply

Comment options

You must be logged in to vote
1 reply
@TomasSlama
Comment options

Answer selected by TomasSlama
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
2 participants