[v4] Class within square brackets [] is ignored

[andrewrauber]

What version of Tailwind CSS are you using?

4.0.3

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

tailwind-cli

What version of Node.js are you using?

v22.13.1

What browser are you using?

N/A

What operating system are you using?

Windows

Describe your issue

I have a Blazor project where some classes are in c#.
This works fine and generates the correct output, except for a specific case where my classes are wrapped in square braces.
The following code doesn't generate the expected gap-y-4, gap-y-6, and gap-y-8 classes in the output.

public enum StackSpacing
{
    [CssClass("gap-y-4")]
    Small,
    [CssClass("gap-y-6")]
    Medium,
    [CssClass("gap-y-8")]
    Large
}

If I remove the square brackets, then the expected classes are generated in the output.
If I put a space between the opening bracket ( [ ) and CssClass, then also the expected classes are generated in the output.
If I change the word "CssClass" to be lowercase, then also the expected classes are generated in the output.

[ferdinand-beyer]

Not sure if this is related, but we noticed a similar issue when extracting classes from Clojure:

This works:

[:div {:class ["p-2"]}

This also:

[:div {:class ["p-2" "text-green"]}

But this one fails to detect p-2, only detects text-green:

[:div {:class ["p-2"
               "text-green"]}

A workaround is to ensure the line does not end with ["class-name":

[:div {:class ["p-2" ;; Workaround for Tailwind
               "text-green"]}

Unfortunately, another idiom commonly used in Clojure does not work either:

[:div.p-2] ;; does not detect "p-2" as a class name

Should I create a separate ticket for that?

[stefanroex]

Came across this while searching for "clojure" in the issues. Just wanted to share our experience.

We’re facing the same challenges as @ferdinand-beyer upgrading to v4 in our Clojure projects. We primarily use the shorthand syntax like [:div.p-2], but unfortunately, it doesn’t seem to detect the class names. I can confirm that handling newlines in class definitions doesn't work. For example, [:div {:class ["p-2" "text-green"]}] works perfectly, but as soon as we introduce newlines, class detection stops working.

I really appreciate all the effort that went into v4, it looks great, and we’d love to use it. If there’s any way I can assist with troubleshooting or testing, please let me know!

[antoniocaporrini]

Hello guys, i'm facing the same problem while building a custom react dashboard.

i was using the class grid-cols-[220px,_1fr], but it seems that Tailwind no longer recognizes the square bracket syntax properly. The class simply doesn't apply, and the grid falls back to a single-column layout.
So i tried defining a custom CSS class instead, and it worked:

.grid-cols-custom { grid-template-columns: 220px 1fr; }

This seems to be a reliable workaround for now. Hope it helps others facing the same issue!

[RobinMalfait]

Hey!

This should be fixed by #16306 and will be available in the next release. You can already try it if you want using the insiders version:

• npm install tailwindcss@insiders @tailwindcss/cli@insiders
• npm install tailwindcss@insiders @tailwindcss/postcss@insiders
• npm install tailwindcss@insiders @tailwindcss/vite@insiders