Arbitrary value classes not generated with Aurelia 2 style class bindings.

[dtaalbers]

What version of Tailwind CSS are you using?

v4.0.14

What build tool (or framework if it abstracts the build tool) are you using?

postcss, webpack, Aurelia 2 beta-23.

What version of Node.js are you using?

v22.13.1

What browser are you using?

N/A

What operating system are you using?

macOS

Reproduction URL

https://github.com/dtaalbers/aurelia-tailwind-issue

Describe your issue

I have prepared two projects for comparison. The first one uses Tailwind CSS v3. To test it, open the project, install dependencies with npm install, start the project with npm start, and navigate to http://localhost:9000/. You can toggle the width of the square using the button.

I have also included a version using Tailwind CSS v4. Follow the same steps to start it. However, in this version, the size toggle no longer works because the w-[44px] class doesn’t seem to be generated.

If you add a div with this class, for example:

<div class="size-[144px] flex items-center justify-center mt-10 bg-yellow-500 rounded p-5">This works</div>

both the new div and the toggled element receive the correct height. Since I frequently use size-[44px].class="size === 'small'"style bindings in my projects, I need this functionality to work properly.

[dtaalbers]

Does anyone has an idea if I am doing something wrong? Any help would be appreciated.