[v4] Class Detection Bug

[okkdev]

What version of Tailwind CSS are you using?

v4.0.0-beta.9

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

Vite v6.0.7

What version of Node.js are you using?

v23.2.0

What browser are you using?

Arc (Chromium)

What operating system are you using?

macOS

Reproduction URL

• Clone this repo: https://github.com/okkdev/tailwindcss4-class-detection-bug-repro/
• run npm dev
• notice that bg-red-200 is missing

Describe your issue

Tailwind doesn't detect the class inside this list [class("bg-red-200")] at https://github.com/okkdev/tailwindcss4-class-detection-bug-repro/blob/main/src/main.gleam#L33

It only works if there is a whitespace somewhere inside of the square braces.
As shown here: https://github.com/okkdev/tailwindcss4-class-detection-bug-repro/blob/main/src/main.gleam#L35
and here: https://github.com/okkdev/tailwindcss4-class-detection-bug-repro/blob/main/src/main.gleam#L38

It would be awesome if there was a way to customize the detection to support more languages like Gleam, instead of having to rely on the automatic detection.

[diana85pope]

Hello,
Like Tailwind CSS's class detection isn't working properly with Gleam syntax when classes are passed as strings (e.g., class("bg-red-200")). The issue is resolved if there’s a space inside the square brackets, but it would be ideal to have better detection support for languages like Gleam. A possible solution could be adding custom class detection rules or improving the generic detection to cover more edge cases like this one.

[okkdev]

Still an issue with v4.0.0

[GiyoMoon]

This bug can also happen in other languages, for example jsx:

const wrapper = (arg) => arg

// tailwindcss v4 doesn't detect this class here
const classes = [wrapper("bg-red-500")]

function App() {
  return (
  <div class={classes[0]} />
  )
}

export default App

It seems that brackets inside square brackets lead to this issue: [wrapper("bg-red-500")]

[okkdev]

I added some plain js examples to my repro repo: https://github.com/okkdev/tailwindcss4-class-detection-bug-repro/blob/js/index.html

[jmmk]

I ran into this as well on 4.0.0 using gleam with the lustre library, with an element defined like:

html.div([attribute.class("py-10")], [])

(in cases where a single class is present, so there is no whitespace).

The smallest example I could find that reproduces this uses just a single square bracket:

[py-10

---

The workaround, as mentioned above, is to add a space:

html.div([attribute.class(" py-10")], [])

Or in the minimal example:

[ py-10

[thecrypticace]

This will be fixed in the next patch release of Tailwind CSS. Thanks! ✨