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>