Arbitrary values aren't recognised in Ruby percent arrays

Thank you for an awesome tool! I’ve been using it in all my projects recently and the productivity gains have been immense.

What version of Tailwind CSS are you using?

Tailwind v3.2.4

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

postcss: 8.4.19, postcss-cli 10.0.0

What version of Node.js are you using?

Node v16.18.1

What browser are you using?

Firefox

What operating system are you using?

macOS

Reproduction URL

I have added a test case that fails, showing the incorrect behaviour. This is the first time I’ve popped the hood on Tailwind, so forgive me if the regexes I’ve linked are the incorrect ones.

https://github.com/developius/tailwindcss/commit/5fb86ab84603949212d8146b09d242b420c7df85

Describe your issue

We’re using Ruby on Rails with Tailwind and use the Ruby percent string syntax to generate arrays. Something like %w[text-[#bada55]] becomes ["text-[#bada55]"] in Ruby.

The following ERB code doesn’t correctly generate the arbitrary value Tailwind class:

<%= content_tag(:div, class: %w[text-[#bada55]]) {} %>

However, this does work:

<%= content_tag(:div, class: ["text-[#a55bad]"]) {} %>

As noted in my commit above, I think this is due to the extra closing square bracket tripping up the regex here^1 but my knowledge of Tailwind’s internals is very vague.

I’m not sure if there’s a way to fix this or not, as I appreciate that handling extremely specific scenarios like this is a direction the project might not want to head in. But maybe there’s a quick fix? Thanks for checking this issue out, anyway 😄

[thecrypticace]

Hey, I’ve merged a fix for this which will be in our next release. In the mean time you can test it by installing our insiders build: npm install tailwindcss@insiders. It’ll take a few minutes for the changes to build, test, and publish to npm. Thanks! ✨

[developius]

The transformer works perfectly, thank you @thecrypticace. I also validated that no other classes got added to the generated CSS - it only included the previously-unmatching one 💯

Do you feel that a modification to the regex is a path we can take here? We can use the transformer in the meantime.