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:

tailwindcss/crates/oxide/src/scanner/mod.rs

Lines 410 to 425 in 8e826b1

	pub fn pre_process_input(content: &[u8], extension: &str) -> Vec<u8> {
	use crate::extractor::pre_processors::*;
	match extension {
	"clj" | "cljs" | "cljc" => Clojure.process(content),
	"cshtml" | "razor" => Razor.process(content),
	"haml" => Haml.process(content),
	"json" => Json.process(content),
	"pug" => Pug.process(content),
	"rb" | "erb" => Ruby.process(content),
	"slim" => Slim.process(content),
	"svelte" => Svelte.process(content),
	"vue" => Vue.process(content),
	_ => content.to_vec(),
	}
	}

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.