Is there a way, identify the usage of variables based on contain the specified work, not prefix

[minesunny]

global css file like this
.light{
	--alert-bg:var(--gray-gray-13);
	--alert-border:var(--gray-gray-10);
}
.dark{
	--alert-bg:var(--gray-gray-2);
	--alert-border:var(--gray-gray-9);
}
tailwindcss.config file like this

alert：{
	bg: 'var(--alert-bg)',
	border:'var(--alert-border)',
}
the usage 

<div className="bg-alter-bg border-alert-border"></div>

all defined colors,can be used as bg (with bg prefix),can be used as border (with border prefix) and so on, but the literal I defined already contains the usage of the variable, bg or border for human reading; and for truely usage, I need to add prefix to let tailwindcss known how to use the variable;
Is there a way, identify the usage of variables based on contain the specified work, not prefix. like this
tailwindcss know alter-bg is a backgroundColor, and alert-border usage to border;

<div className="alter-bg alert-border"></div>

[wongjn]

You make your own utility classes to do this:

@layer utilities {
  .alert-bg {
    background-color: var(--alert-bg);
  }
  .alert-border {
    border-color: var(--alert-border);
  }
}

Otherwise, if you can tolerate having the alert at the end, you could do:

module.exports = {
  theme: {
    extends: {
      backgroundColor: {
        alert: 'var(--alert-bg)',
      },
      borderColor: {
        alert: 'var(--alert-border)',
      }

<div className="bg-alert border-alert"></div>

[minesunny]

thanks, they are good ways, and I find another way to do that ;
add this code to tailwind.config.ts' , the actual addComponents(components) result is the same as yours, but can be scriptable

// add to plugins option
	function ({ addComponents, theme }) {
			const colors = theme('colors');
			let custom = ["alert"];
			let components = {};
			let colorMap = {
				"bg": "backgroundColor",
				"border": "borderColor",
			}
			for (let key of Object.keys(colors)) {
				if (custom.includes(key)) {
					const result = flattenJSON(colors[key], key);
					for (let k of Object.keys(result)) {
						const color = result[k];
						for (let i in color) {
							const c = color[i];
							const colorKey = c[0];
							const colorValue = c[1];
							if (k == "bg") {
								components[".bg-" + colorKey] = {
									backgroundColor: colorValue
								};
								components["." + colorKey + "-bg"] = {
									backgroundColor: colorValue
								};
							} else if (k == "border") {
								components[".border-" + colorKey] = {
									borderColor: colorValue
								};
								components["." + colorKey + "-border"] = {
									borderColor: colorValue
								};
							}
						
						}
					}
				}
			}
			// Add custom utilities based on the variable names
			addComponents(components);
		}

function flattenJSON(jsonObj, prefix) {
	const result = {
		"bg": [],
		"border": [],
	};
	function recurse(obj, prefix = '') {
		for (let key in obj) {
			if (obj.hasOwnProperty(key)) {
				const color = result[key];
				if (color === undefined) {
					const newKey = prefix ? `${prefix}-${key}` : key;
					if (typeof obj[key] === 'object' && !Array.isArray(obj[key])) {
						recurse(obj[key], newKey);
					}
				} else {
					color.push([prefix, obj[key]]);
				}

			}
		}
	}

	recurse(jsonObj, prefix);
	return result;
}