Arbitrary values in arrays not picked up

[gukj]

What version of Tailwind CSS are you using?

v3.3.2

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

postcss 8.4.24, Next.js 13.4.4, react 18.2.0

What version of Node.js are you using?

v20.1.0

What browser are you using?

Chrome, Safari, Firefox

What operating system are you using?

macOS 13.13.1 (a)

Reproduction URL

Tailwind Play with repro. from-black/[85] appears in the snippet but does not appear in the css output.

[a:"[]]from-black/[85]

Describe your issue

I'm using a package of components that uses cva for some styles. The styles are sometimes structured like:

export const imageOverlayClasses = cva(
  [
    'w-full',
    'bg-gradient-to-t',
    'from-black/[85]',
    'to-transparent',
  ]
)

Which is compiled to a index.js where the styles show up as ... dx=se(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"] .... For some reason, from-black[85] isn't picked up by tailwind, while w-full, bg-gradient-to-t and to-transparent is.

Makes me think that the regex is missing arbitrary styles when they're nested in brackets.

Might be related to #11241

[adamwathan]

Hey! Can you please provide a reproduction? Definitely is applicable 🫣

[adamwathan]

I pasted your code into Tailwind Play and it looks like all of the classes are picked up:

https://play.tailwindcss.com/UGlr6X9Xvm

Are you scanning the source file for classes or the compiled file? I tested both and both are working here. Really need a reproduction to be able to help more.

[gukj]

Hey! Can you please provide a reproduction? Definitely is applicable 🫣

Of course — my bad!

Tailwind Play with repro. from-black/[85] appears in the snippet but does not appear in the css output.

[a:"[]]from-black/[85]

Edit: I've removed as much from the snippet as I could while still not seeing the class in the css output.

[RobinMalfait]

Hey @gukj I'm struggling to see how you end up in that scenario exactly.

The long version:

export const imageOverlayClasses = cva(
  [
    'w-full',
    'bg-gradient-to-t',
    'from-black/[85]',
    'to-transparent',
  ]
)

Should work fine.

The minified version should work fine as well:

dx=se(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"])

But I'm struggling to see how you end up at:

[a:"[]]from-black/[85]

If you simplify the minified version by dropping classes that aren't relevant I would expect to end up with something like this:

dx=se(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"])
se(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"])
x(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"])
x(["from-black/[85]"])

We did do some fixes that will be available in the next release, but you can already try them in the insiders version:

• npm install tailwindcss@insiders

That said, I have 2 questions for you:

1. Does the error still occur if you use the insiders version?
2. If it still occurs, can you share the exact case that is failing?

[RobinMalfait]

Going to close this issue for now, feel free to comment if the issue still occurs using the insiders built.

I know this version fails right now: [a:"[]]from-black/[85] but I don't see how you got into that state apart from trying to manually reducing the example. So if it works with the minified code that you mentioned earlier:

dx=se(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"])
se(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"])
x(["w-full","bg-gradient-to-t","from-black/[85]","to-transparent"])
x(["from-black/[85]"])

Then I think this is not an issue to worry about.

[gukj]

@RobinMalfait I got to that state by just reducing the original string, so no worries there. Looks like 3.3.3 fixes the issue I had with the original minified source — thanks! 🎉

[RobinMalfait]

Aha beautiful, glad its working!