Detect AlpineJS variables in standalone compiler

[anjanesh]

I am running a standalone version of the 4.1 compiler :

./tailwindcss4 --watch --input in.css --output out.css

How do I get the tailwindcss compiler to detect this AlpineJS variable ?

:class="`text-sm text-[#${item.color}]`"

I had to resort to this to pre-define the color shades in a hidden DIV.

<div class="hidden">
	<div class="text-[#26BBE3]"></div>
	<div class="text-[#4CD7C1]"></div>
	<div class="text-[#F7847B]"></div>
</div>
<script>
	let reasons = [
		{ category: "fruit", color: "26BBE3" },			
		{ category: "vegetable", color: "4CD7C1" },
		{ category: "meat", color: "F7847B" },
	];
</script>
<div x-data="{reasons: reasons}">
	<template x-for="(item, index) in reasons">
		<div x-text="item.category" :class="`text-sm text-[#${item.color}]`"></div>
	</template>
</div>

I understand the answer is to use inline styles instead, but am just wondering alternate approaches.

[wongjn]

As per the documentation:

Since Tailwind scans your source files as plain text, it has no way of understanding string concatenation or interpolation in the programming language you're using.

❌ Don't construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.

Instead, make sure any class names you’re using exist in full:

✅ Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

If you're using a component library like React or Vue, this means you shouldn't use props to dynamically construct classes:

❌ Don't use props to build class names dynamically

function Button({ color, children }) {
  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;
}