[v4] Allow prefixes in theme block (custom properties)

[Vannsl]

Hi!

I'm a big fan of the idea to move the configuration directly into a CSS file.

Especially, I like that CSS Variables/Custom Properties have to be defined only once, and then work as Custom Props and Tailwind Classes.

I want to share an idea with you if it would be possible to set prefixes or suffices to Custom Properties.

Example: In a project design tokens are prefixed with the app name:

:root {
  --app-color-gray-900: #a9a9a9;
}

When initializing them with TailwindCSS @theme, it needs to be defined like this:

@import "tailwindcss";

@theme {
  --color-gray-900: #a9a9a9;
}

Now, I'm wondering if there might be a way to allow prefixes so that the following would work as Custom Props AND TailwindCSS classes:

@import "tailwindcss";

@theme {
  --app-color-gray-900: #a9a9a9;
}

I created an example in the Tailwind Playground: https://play.tailwindcss.com/2Kciw6ogD0

I set pink and red colors for gray-900 and gray-800 to make it obvious they're coming from the @theme definition and are not preset colors.

Would love to hear your thoughts! Keep up the good work!

[ritingliudd01]

Or, can we have it this way?

@import "tailwindcss";

@theme(app) {
  --color-gray-900: #a9a9a9;
}

[mass10]

I need it!