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