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.

[dtaalbers]

@RobinMalfait Do you perhaps have an update on this? Could really use this to continue upgrading my projects.

[RobinMalfait]

@dtaalbers sorry for not getting back earlier; Do you know if you always have to use .html files, or are there other file extensions you can use for Aurelia?

Typically when we have to deal with custom templating syntax, we add a pre-processor to massage the file a little bit so we can extract candidates easier. We already do that for: https://github.com/tailwindlabs/tailwindcss/blob/8e826b18f3997970503508817ef2fd2b249d3009/crates/oxide/src/scanner/mod.rs#L410-L425

The problem with Aurelia as far as I can tell is that this custom syntax is implemented in .html files. So the only options I see right now is:

1. Add a pre-processor for HTML files — which would be a bit unfortunate because only Aurelia would benefit from this and everyone else pays an additional cost.
2. Handle this situation size-[44px].class= better in general. Essentially allowing . as a "bounding character" where we know that a class is allowed to stop (or start) again. The issue with this is that all programming languages with dot.notation.syntax will now all become potential classes.

So in either scenario there is an additional cost to pay.

So a few questions:

• Are there other file extensions you can use apart from .html?
• Is there a way to write conditionals inside of the class attribute instead? E.g.: <div class="flex items-center {{ size === 'small' ? 'size-[44px]' : '' }}"></div>

[bigopon]

Thanks @RobinMalfait ,

...sorry for not getting back earlier; Do you know if you always have to use .html files, or are there other file extensions you can use for Aurelia?

The Aurelia vite-plugin/ webpack-loader can be configured to deal with a different extension, which can be made .au instead of .html in this case. But this will either require the entire application to be converted to .au, or have a mixed of .html and .au, which is neither good.

Based on the potential solutions for this issue:

Add a pre-processor for HTML files — which would be a bit unfortunate because only Aurelia would benefit from this and everyone else pays an additional cost.

Shouldn't this preprocessor be configurable and only be turned on when an application wishes so? This is how I normally see the API so I'm assuming so without any understanding how Tailwind works.

Handle this situation size-[44px].class= better in general. Essentially allowing . as a "bounding character" where we know that a class is allowed to stop (or start) again. The issue with this is that all programming languages with dot.notation.syntax will now all become potential classes.

I think this is also a potential solution that can be configurable. An application can opt-in this behavior. This also makes me wonder whether there's currently any bounding characters that Tailwind is already aware of. Aurelia binding syntax can be configured (per application) to use that bounding character instead of a ., for example:

size-[44px]:class="abc"

For the question you gave:

Is there a way to write conditionals inside of the class attribute instead? E.g.:

Aurelia can also work with this syntax, with a slight difference in syntax

// handlebars
<div class="flex items-center {{ size === 'small' ? 'size-[44px]' : '' }}"></div>
// aurelia
<div class="flex items-center ${ size === 'small' ? 'size-[44px]' : '' }"></div>

but the OP not wanting to use this syntax is the motivation I think.

[dtaalbers]

@bigopon Thank you for chiming in, much appreciated!

but the OP not wanting to use this syntax is the motivation I think.

Correct. I strongly dislike that syntax because it makes my views messy. Regarding the other questions and answers: my knowledge in that area is limited. That’s why I asked @bigopon to join the discussion, as he is one of Aurelia’s core developers.

Just as an FYI: the latest Aurelia 2 beta update also supports the following syntax for multiple classes:

text-yellow-700,border-yellow-500,bg-yellow-50.class="size === 'small'"

I just wanted to make sure that if any fixes are made, this syntax is also handled properly.

[dtaalbers]

@RobinMalfait Any update on this?

[zuzusik]

It would generally be great to allow folks to use custom per-processors.

I am working now on moving Tailwind 3 project that utilized content.transform option, and absence of it's analog in Tailwind 4 is a major inconvenience.

[RobinMalfait]

Hey!

@zuzusik are you also working with Aurelia, or do you have a custom content.transform (maybe for a specific use case?) if it's not Aurelia related I would recommend to open a new issue instead.

---

That said, we're more than happy to add a custom transformer for Aurelia, but only if it's based on a specific file extension. We already do this for a bunch of frameworks and programming languages:

https://github.com/tailwindlabs/tailwindcss/blob/main/crates/oxide/src/scanner/mod.rs#L480-L496

This way you only pay a small performance price if you are actually using one of those languages / frameworks. If you don't use any of them, then there is no cost attached to it. Unfortunately, if Aurelia just uses plain .html files, then this would be enabled for everybody using .html files even when you don't use Aurelia. This would also increase complexity if other frameworks want to use .html files with different syntax.

Going to close this for now, and we can re-think this if more people want this functionality. But again, if it's about a unique file extension then we can add it as well.

[dtaalbers]

This way you only pay a small performance price if you are actually using one of those languages / frameworks. If you don't use any of them, then there is no cost attached to it. Unfortunately, if Aurelia just uses plain .html files, then this would be enabled for everybody using .html files even when you don't use Aurelia. This would also increase complexity if other frameworks want to use .html files with different syntax.

You can prevent this with an opt-in setting no?

I have multiple Aurelia 2 applications that are ready to upgrade to tailwindcss v4, but they are loaded with the size-[44px].class= syntax.

[bigopon]

For now, I think any application can use a custom compiling hook to do the following transformation:

<div size-[44px].class="condition">

to

<div class="${condition ? 'size-[44px]' : ''}">

But this won't work if there' more than 1 bindings, like the following example:

<div size-[44px].class="condition" space-[16px].class="condition2">

since it will be translated to:

<div class="${condition ? 'size-[44px]' : ''" class="${condition2 ? 'space-[16px]' : ''}">

the 2nd class attribute will override the 1st, it's a html thing, and the final form we will have is just

<div class="${condition2 ? 'space-[16px]' : ''}">

So I think it's still best that we have an official support from Tailwind 🙏

---

EDIT: it could also be transformed to something like this

<div class="${condition ? 'size-[44px]'  ${condition2 ? 'space-[16px]' : ''}">

maybe it's good enough as a workaround for now?

EDIT2: actually pls ignore my post. Since Tailwind processes the file before Aurelia, whatever I have above won't work.

[euglv]

That said, we're more than happy to add a custom transformer for Aurelia, but only if it's based on a specific file extension. We already do this for a bunch of frameworks and programming languages:

Can you implement some plugin API to allow developers to write their own custom classes processing logic, instead of relying on file extensions?