Tailwind CSS v4 Selector Parsing Issue with Empty String Attribute

[coderrshyam]

Tailwind CSS v4 Selector Parsing Issue with Empty String Attribute

Environment

• Tailwind CSS Version: 4.0.7
• Framework: Next.js 15.1.7
• Node.js Version: 22.14.0
• Browser: Chrome
• Operating System: Windows

Reproduction

Repository: https://github.com/coderrshyam/next.js-hook-webpack-error

Steps to Reproduce:

1. Clone the repository:

git clone https://github.com/coderrshyam/next.js-hook-webpack-error.git
cd next.js-hook-webpack-error

2. Install dependencies:

pnpm install

3. Attempt to build the project:

pnpm build

Issue Description:

When attempting to build a Next.js project with Tailwind CSS v4, an issue occurs with CSS selector parsing, specifically for selectors containing attribute selectors with empty string values.

The problematic selector: .prose code[data-theme*=" "]

Behavior in Tailwind CSS v3 (Working Correctly)

In Tailwind CSS v3, the selector is parsed correctly:

Parser {
  rule: '.prose code[data-theme*=" "]',
  options: { lossy: false, safe: false },
  position: 8,
  css: '.prose code[data-theme*=" "]',
  // ... other properties
}

Behavior in Tailwind CSS v4 (Incorrect)

In Tailwind CSS v4, the selector is not parsed correctly:

Parser {
  rule: '.prose code[data-theme*=\\]',
  options: { lossy: false, safe: false },
  position: 8,
  css: '.prose code[data-theme*=\\]', 
  // ... other properties
}

Expected Behavior

The parser in Tailwind CSS v4 should correctly handle the empty string in the attribute selector, similar to how it was handled in v3.

Actual Behavior

The parser in Tailwind CSS v4 seems to be escaping or misinterpreting the empty string in the attribute selector, leading to an incorrect parsing of the CSS rule.

Additional Notes

• This issue specifically occurs during the build process of a Next.js project.
• The problem appears to be isolated to cases where an attribute selector contains an empty string value.

[philipp-spiess]

Hey! This seems like an issue in the upstream handling of the CSS file, I can reproduce this without Tailwind CSS. The reason is that we minify the selector you mentioned to something like this (in it's most minimal form):

[data-attr=\ ] {
  color: red;
}

This works in the browsers but will trip up Next.js/webpack right now.

I created an upstream bug report for this: vercel/next.js#76269

[coderrshyam]

ok