Class names adjacent to [ and ] delimiters not extracted

[nicomen]

tailwind-tt-repro.zip

What version of Tailwind CSS are you using?

v4.1.8

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

tailwindcss CLI (standalone binary)

What version of Node.js are you using?

N/A — using the standalone Tailwind CLI binary, not Node.js (22.22.1)

What browser are you using?

Vivaldi

What operating system are you using?

Linux

Reproduction URL

Minimal reproduction attached as a zip: [tailwind-tt-repro.zip]

template.tx:

  <div class="[% IF $is_open %]bg-white/40[% ELSE %]bg-white/10[% END %]"></div>
  <div class="bg-blue-500"></div>

app.css:

  @import "tailwindcss";
  @source "./template.tx";

Run tailwindcss -i app.css -o out.css — bg-white/40 and bg-white/10 are absent from out.css, but bg-blue-500 is present.

Describe your issue

The oxide scanner does not treat [ and ] as word boundaries, so class names immediately adjacent to [% %]-style template tags are not extracted.

Template engines that use [% %] delimiters include Template Toolkit (Perl), Text::Xslate (Perl), Template::Tiny (Perl), and ExpressionEngine (PHP). In these templates, conditional
class names look like:

<div class="[% IF cond %]bg-white/40[% ELSE %]bg-white/10[% END %]">

The scanner sees %]bg-white/40[% as one token because [ and ] are not boundary characters, so neither class is extracted.

By contrast, ERB/EJS templates using <% %> work correctly because < and > are already treated as boundaries. The {/} boundary fix landed in #17001. Adding [/] as boundaries would fix this consistently.

Workarounds (both are unpleasant):

1. @source inline("bg-white/10 bg-white/20 bg-white/40 ...") — must be kept in sync manually
2. A pre-processing script that strips [% ... %] tags to a clean file before scanning — requires a parallel watcher process alongside tailwindcss --watch

[RobinMalfait]

Just marking ] and [ as boundary characters is not a good idea since they can be part of the className itself (e.g. bg-[red]). We can add a pre-processor for this though.

Are you only using this syntax in .tx files? Or also in other file extensions?

[nicomen]

Common suffices would be .tt .html .templ I guess (Template::Toolkit, Text::XSlate::TTerse, some others) - but templates can be inlined in regular source code etc and one can use whatever filenames and file ending one wants.

This used to work fine in Tailwind 3.x

I realize there is a different approach in finding used class-names, but not sure the approach of stripping tags is optimal either.

If one really want to keep a whitelist of tags to strip, one might get away with %]…[% for now.

[lsunsi]

I also came across this issue using maud on rust files.
More specifically, in maud toggles expressions like this are allowed and are about a conditional class application (apply cute class if cuteness is over 50).

p.cute[cuteness > 50] { "Squee!" }

So the issue comes up too, exactly as described by OP.