Paths containing both brackets and parenthesis are not watched

[jide]

What version of Tailwind CSS are you using?

3.4.0

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

Bare minimum repro

What version of Node.js are you using?

18

What browser are you using?

Chrome

What operating system are you using?

macOs

Reproduction URL

https://github.com/jide/tailwind-config-path-bug/tree/main

Describe your issue

When a path contains both brackets and parenthesis, the changes are not detected.

In the example, here is the file tree:

src/1.html
src/(test)/2.html
src/[test]/3.html
src/[test]/(test)/4.html

Each file has this content:

mr-(the corresponding number)

The config:

module.exports = {
  content: [
    "./src/1.html",
    "./src/(test)/2.html",
    "./src/[test]/3.html",
    "./src/[test]/(test)/4.html",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

When starting

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

The output is:

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

mr-4 is missing.

[jide]

EDIT: Does not work when there is a star and parenthesis either:

"./src/*/(test)/4.html",

Updated repro.

[RobinMalfait]

Hey!

This is expected because [] and () have special meaning inside globs. More info: https://github.com/mrmlnc/fast-glob#advanced-syntax

You have 2 options you can apply:

1. Simplify the glob pattern (for this example it will work, not sure what your real use case looks like). E.g.: ./src/**/*.html
2. Escape the special characters using \\(, \\) and \\[, \\]

For the escaping part, this currently has a bug and I'm fixing that as we speak but maybe option 1 is all you need. To be continued.

[jide]

Hey !

I thought this was addressed because I saw this comment #9741 (comment).

I tried to escape characters, but since it did not work I assumed it was not supported because there was some automatic escaping (that's what the above comment made me think).

As you may guess, in my case I can't resort to a simpler path because I use the pattern in a next app where I need app router grouping + params.

I'll keep an eye on this issue !

[jide]

What remains unclear though is why it works without escaping in the cases where there is only one group of special characters:
"./src/[test]/3.html" and "./src/(test)/2.html" work, but "./src/[test]/(test)/4.html" does not.

[jide]

Awesome !

[RobinMalfait]

Hey!

This should be fixed by #12715, and will be available in the next release.

You can already try it by using the insiders build npm install tailwindcss@insiders.

We are still making some improvements to making sure it also works on Windows as expected. But for Linux / macOS this should already work with the linked PR.

Note: there is no need to escape the (, ), [ or ] characters and the original input you had should just work. If not, please open a new issue with some additional information (or real paths) in case we missed something.

Your remaining question about why the combination of []/() was not working was related to the same internal bug.

[jide]

Thanks !!